/**
* helix.css — Système de design partagé Excel-Pro (D9 Helix)
* À inclure sur toutes les pages du portail.
*
* Usage :
* ou : (sous-dossiers)
*
* Dark mode : ajouter data-theme="dark" sur (géré par helix-theme.js)
*/
/* ══ Reset ══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0; padding: 0;
-webkit-tap-highlight-color: transparent;
}
html { height: 100%; -webkit-text-size-adjust: 100%; }
/* ══ Tokens ═════════════════════════════════════════════════════════════ */
:root {
/* Couleurs brand */
--blue: #0B4F6C;
--blue-dk: #041F2E;
--blue-md: #1A7FA8;
--blue-lt: #E1F2F8;
--blue-bd: #A8D8EA;
--orange: #EA7722;
--orange-dk: #C9621A;
--orange-lt: #FFF3E8;
--green: #059669;
--green-lt: #ECFDF5;
--purple: #7C3AED;
--purple-lt: #F5F3FF;
--amber: #B45309;
--amber-lt: #FEF3C7;
--red: #DC2626;
--red-lt: #FEF2F2;
--teal: #0D9488;
--teal-lt: #F0FDFA;
/* Aliases utilitaires */
--danger: #DC2626;
--danger-bg: #FEF2F2;
--success: #059669;
--warn: #D97706;
--radius: 12px;
/* Surfaces (light) */
--bg: #eef2f7;
--surface: #ffffff;
--surface2: #f1f5f9;
--border-lt: rgba(0,0,0,.05);
--border: rgba(0,0,0,.07);
--border-md: rgba(0,0,0,.11);
/* États sémantiques */
--success-bg: #ECFDF5;
--warn-bg: #FFFBEB;
/* Texte (light) */
--text: #0f172a;
--muted: #94a3b8;
--muted-dk: #64748b;
/* Footer / navbar */
--nav-bg: rgba(255,255,255,.96);
--footer-bg: rgba(255,255,255,.96);
/* Stats */
--stats-bg: #ffffff;
--stats-sep: #e8edf3;
/* Misc */
--r: 12px;
--r-lg: 18px;
--r-xl: 24px;
--t: .18s ease;
--shadow-sm: 0 2px 10px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
--shadow-md: 0 6px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
--shadow-lg: 0 16px 48px rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.07);
}
/* ── Dark mode ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
--bg: #0d1520;
--surface: #1a2538;
--surface2: #1e2d40;
/* Brand couleurs — version visible sur fond sombre */
--blue: #38b2d8;
--blue-dk: #0B4F6C;
--blue-md: #5ac8e8;
--green: #34d399;
--amber: #f59e0b;
--purple: #a78bfa;
--danger: #f87171;
--success: #34d399;
--warn: #fbbf24;
--border-lt: rgba(255,255,255,.05);
--border: rgba(255,255,255,.08);
--border-md: rgba(255,255,255,.12);
--success-bg: rgba(5,150,105,.15);
--warn-bg: rgba(217,119,6,.12);
--danger-bg: rgba(220,38,38,.15);
/* Accent light colors — dark mode overrides */
--blue-lt: rgba(56,178,216,.12);
--blue-bd: rgba(56,178,216,.35);
--orange-lt: rgba(234,119,34,.15);
--green-lt: rgba(5,150,105,.15);
--purple-lt: rgba(124,58,237,.18);
--amber-lt: rgba(180,83,9,.15);
--red-lt: rgba(220,38,38,.15);
--text: #f1f5f9;
--muted: #64748b;
--muted-dk: #94a3b8;
--nav-bg: rgba(13,21,32,.97);
--footer-bg: rgba(13,21,32,.97);
--stats-bg: #1a2538;
--stats-sep: rgba(255,255,255,.08);
--shadow-sm: 0 2px 10px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
--shadow-md: 0 6px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
--shadow-lg: 0 16px 48px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
}
/* ══ Typographie ════════════════════════════════════════════════════════ */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
background: var(--bg);
background-image:
radial-gradient(ellipse 100% 60% at 15% -10%, rgba(11,79,108,.07) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 85% 110%, rgba(234,119,34,.05) 0%, transparent 55%);
background-attachment: fixed;
color: var(--text);
min-height: 100dvh;
-webkit-font-smoothing: antialiased;
transition: background var(--t), color var(--t);
}
/* ══ Animations ═════════════════════════════════════════════════════════ */
@keyframes hx-fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hx-pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(234,119,34,.3); }
50% { box-shadow: 0 0 0 8px rgba(234,119,34,0); }
}
.hx-stagger > * {
opacity: 0;
animation: hx-fadeUp .32s ease forwards;
}
.hx-stagger > *:nth-child(1) { animation-delay: .04s; }
.hx-stagger > *:nth-child(2) { animation-delay: .08s; }
.hx-stagger > *:nth-child(3) { animation-delay: .12s; }
.hx-stagger > *:nth-child(4) { animation-delay: .16s; }
.hx-stagger > *:nth-child(5) { animation-delay: .20s; }
.hx-stagger > *:nth-child(6) { animation-delay: .24s; }
.hx-stagger > *:nth-child(7) { animation-delay: .28s; }
.hx-stagger > *:nth-child(8) { animation-delay: .32s; }
.hx-stagger > *:nth-child(9) { animation-delay: .36s; }
.hx-stagger > *:nth-child(10) { animation-delay: .40s; }
.hx-stagger > *:nth-child(11) { animation-delay: .44s; }
.hx-stagger > *:nth-child(12) { animation-delay: .48s; }
/* ══ Barre accent top ═══════════════════════════════════════════════════ */
@keyframes hx-accent-slide {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.hx-accent-bar {
height: 3px;
background: linear-gradient(90deg,
var(--blue) 0%,
var(--blue-md) 25%,
var(--orange) 50%,
var(--blue-md) 75%,
var(--blue) 100%
);
background-size: 200% 100%;
animation: hx-accent-slide 6s linear infinite;
flex-shrink: 0;
}
/* ══ Focus visible (accessibilité) ═════════════════════════════════════ */
:focus-visible {
outline: 2.5px solid var(--blue);
outline-offset: 2px;
border-radius: 4px;
}
button:focus-visible,
a:focus-visible { border-radius: 8px; }
/* ══ Navbar ═════════════════════════════════════════════════════════════ */
.hx-navbar {
position: sticky; top: 0; z-index: 100;
background: var(--nav-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
transition: background var(--t), border-color var(--t);
}
.hx-navbar-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px;
max-width: 1400px; margin: 0 auto;
}
.hx-nav-brand {
display: flex; align-items: center; gap: 9px;
}
.hx-logo {
width: 28px; height: 28px; border-radius: 8px;
background: var(--blue);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hx-logo svg { display: block; }
.hx-brand-name {
font-size: 13px; font-weight: 800;
letter-spacing: .07em; color: var(--text);
transition: color var(--t);
}
.hx-brand-badge {
font-size: 11px; color: var(--muted);
background: var(--surface2); border: 1px solid var(--border-md);
padding: 2px 8px; border-radius: 6px; font-weight: 500;
text-transform: none; letter-spacing: 0;
transition: background var(--t), color var(--t), border-color var(--t);
}
.hx-nav-right {
display: flex; align-items: center; gap: 8px;
}
/* Toggle dark/light */
.hx-theme-btn {
width: 32px; height: 32px; border-radius: 50%;
border: none; background: transparent; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--muted); transition: background var(--t), color var(--t);
flex-shrink: 0;
}
.hx-theme-btn:hover { background: rgba(148,163,184,.15); color: var(--text); }
/* Admin pill */
.hx-admin-pill {
display: none; /* affiché via JS si isAdmin */
font-size: 11px; font-weight: 700;
color: var(--orange); background: rgba(234,119,34,.1);
padding: 3px 9px; border-radius: 6px;
text-transform: none; letter-spacing: 0;
align-items: center;
}
.hx-admin-pill.visible { display: inline-flex; }
/* Avatar */
.hx-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--orange);
display: flex; align-items: center; justify-content: center;
font-size: .68rem; font-weight: 800; color: #fff;
flex-shrink: 0; user-select: none;
}
/* ══ Zone principale ════════════════════════════════════════════════════ */
.hx-main {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.25rem 5rem;
}
/* ══ Greeting ═══════════════════════════════════════════════════════════ */
.hx-greeting {
padding: 1.25rem 0 1.75rem;
}
.hx-greeting-date {
font-size: .6rem; font-weight: 600;
color: var(--muted); letter-spacing: .1em;
text-transform: uppercase; margin-bottom: .5rem;
transition: color var(--t);
}
.hx-greeting-title {
font-size: 2.1rem; font-weight: 900;
color: var(--text); line-height: 1.05; letter-spacing: -.04em;
transition: color var(--t);
}
/* Prénom en dégradé orange */
.hx-greeting-title em {
font-style: normal;
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dk) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.hx-greeting-sub {
font-size: .7rem; color: var(--muted);
margin-top: .5rem; transition: color var(--t);
}
/* ══ Stats row ══════════════════════════════════════════════════════════ */
.hx-stats {
display: grid;
grid-template-columns: 1fr 1px 1fr 1px 1fr;
align-items: center;
background: var(--stats-bg);
border-radius: 16px; overflow: hidden;
margin-bottom: 1.75rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
transition: background var(--t), box-shadow var(--t), border-color var(--t);
}
.hx-stat-cell {
padding: 1.2rem .5rem 1rem;
text-align: center;
position: relative;
}
/* Barre colorée en haut de chaque cellule */
.hx-stat-cell::before {
content: '';
position: absolute; top: 0; left: .75rem; right: .75rem;
height: 2.5px; border-radius: 0 0 3px 3px;
opacity: .7;
transition: opacity var(--t);
}
.hx-stat-cell:nth-child(1)::before { background: var(--blue); }
.hx-stat-cell:nth-child(3)::before { background: var(--green); }
.hx-stat-cell:nth-child(5)::before { background: var(--orange); }
.hx-stat-cell:hover::before { opacity: .85; }
.hx-stat-value {
font-size: 1.85rem; font-weight: 900;
letter-spacing: -.04em; line-height: 1;
}
.hx-stat-label {
font-size: .57rem; font-weight: 600;
color: var(--muted); text-transform: uppercase;
letter-spacing: .06em; margin-top: .25rem;
transition: color var(--t);
}
.hx-stat-sep {
background: var(--stats-sep); height: 32px;
transition: background var(--t);
}
/* ══ Section label ══════════════════════════════════════════════════════ */
.hx-section {
display: flex; align-items: center; gap: .75rem;
padding: 0 0 .875rem;
}
.hx-section-lbl {
font-size: .62rem; font-weight: 700;
color: var(--text); letter-spacing: .09em;
text-transform: uppercase; white-space: nowrap;
transition: color var(--t);
}
.hx-section-line {
flex: 1; height: 1px;
background: var(--border); transition: background var(--t);
}
.hx-section-count {
font-size: .6rem; font-weight: 700;
background: var(--surface2); color: var(--muted);
padding: .1rem .45rem; border-radius: 100px;
border: 1px solid var(--border-md);
transition: background var(--t), color var(--t), border-color var(--t);
}
/* ══ Grille tuiles ══════════════════════════════════════════════════════ */
.hx-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .9rem;
margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
.hx-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ══ Tuile ══════════════════════════════════════════════════════════════ */
.hx-tile {
background: var(--surface);
border-radius: 18px;
padding: 1.35rem 1.15rem 1.15rem;
border: 1px solid var(--border);
cursor: pointer; text-decoration: none; color: inherit;
display: flex; flex-direction: column; gap: 0;
position: relative; overflow: hidden;
box-shadow: var(--shadow-sm);
transition: border-color var(--t), box-shadow var(--t),
transform var(--t), background var(--t);
-webkit-user-select: none; user-select: none;
}
/* Accent discret en haut de chaque tuile */
.hx-tile::before {
content: '';
position: absolute; top: 0; left: .75rem; right: .75rem;
height: 2.5px;
background: transparent;
border-radius: 0 0 3px 3px;
opacity: .3;
transition: opacity var(--t), background var(--t);
}
.hx-tile[data-color="orange"]::before { background: var(--orange); }
.hx-tile[data-color="blue"]::before { background: var(--blue); }
.hx-tile[data-color="green"]::before { background: var(--green); }
.hx-tile[data-color="purple"]::before { background: var(--purple); }
.hx-tile[data-color="amber"]::before { background: var(--amber); }
.hx-tile[data-color="red"]::before { background: var(--red); }
.hx-tile[data-color="teal"]::before { background: var(--teal); }
.hx-tile[data-color="orange"]:hover::before,
.hx-tile[data-color="blue"]:hover::before,
.hx-tile[data-color="green"]:hover::before,
.hx-tile[data-color="purple"]:hover::before,
.hx-tile[data-color="amber"]:hover::before,
.hx-tile[data-color="red"]:hover::before,
.hx-tile[data-color="teal"]:hover::before { opacity: .75; }
.hx-tile:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.hx-tile:active { transform: scale(.97); }
/* Variantes hover couleur (appliquées via data-color) */
.hx-tile[data-color="orange"]:hover {
border-color: rgba(234,119,34,.25);
box-shadow: 0 10px 32px rgba(234,119,34,.16), 0 3px 8px rgba(0,0,0,.06);
}
.hx-tile[data-color="blue"]:hover {
border-color: rgba(11,79,108,.2);
box-shadow: 0 10px 32px rgba(11,79,108,.13), 0 3px 8px rgba(0,0,0,.06);
}
.hx-tile[data-color="green"]:hover {
border-color: rgba(5,150,105,.2);
box-shadow: 0 10px 32px rgba(5,150,105,.12), 0 3px 8px rgba(0,0,0,.06);
}
.hx-tile[data-color="purple"]:hover {
border-color: rgba(124,58,237,.2);
box-shadow: 0 10px 32px rgba(124,58,237,.12), 0 3px 8px rgba(0,0,0,.06);
}
.hx-tile[data-color="amber"]:hover {
border-color: rgba(180,83,9,.2);
box-shadow: 0 10px 32px rgba(180,83,9,.12), 0 3px 8px rgba(0,0,0,.06);
}
.hx-tile[data-color="red"]:hover {
border-color: rgba(220,38,38,.2);
box-shadow: 0 10px 32px rgba(220,38,38,.12), 0 3px 8px rgba(0,0,0,.06);
}
.hx-tile[data-color="teal"]:hover {
border-color: rgba(13,148,136,.2);
box-shadow: 0 10px 32px rgba(13,148,136,.13), 0 3px 8px rgba(0,0,0,.06);
}
/* Tuile "à venir" */
.hx-tile.soon {
opacity: .6; border-style: dashed;
pointer-events: none;
}
/* Icône tuile */
.hx-tile-icon {
width: 52px; height: 52px; border-radius: 15px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem; flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
transition: transform var(--t), box-shadow var(--t);
}
.hx-tile:hover .hx-tile-icon {
transform: scale(1.06);
box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.hx-tile-icon svg { width: 23px; height: 23px; display: block; }
/* Nom & description */
.hx-tile-name {
font-size: .9rem; font-weight: 700;
color: var(--text); margin-bottom: .28rem;
transition: color var(--t);
}
.hx-tile-desc {
font-size: .7rem; color: var(--muted);
line-height: 1.45; transition: color var(--t);
}
/* Badge "NEW" */
.hx-tile-badge {
position: absolute; top: .7rem; right: .7rem;
font-size: .55rem; font-weight: 800; letter-spacing: .04em;
padding: .15rem .45rem; border-radius: 100px;
animation: hx-pulse-glow 2s infinite;
}
.hx-tile-badge.new {
background: var(--orange); color: #fff;
}
.hx-tile-badge.beta {
background: var(--purple); color: #fff;
animation: none;
}
/* ══ Tuiles admin (row compact) ═════════════════════════════════════════ */
.hx-admin-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .9rem;
margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
.hx-admin-grid { grid-template-columns: repeat(2, 1fr); }
}
.hx-admin-tile {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: .9rem 1rem;
display: flex; align-items: center; gap: .7rem;
cursor: pointer; text-decoration: none; color: inherit;
box-shadow: var(--shadow-sm);
transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
.hx-admin-tile:hover {
border-color: rgba(11,79,108,.2);
background: var(--blue-lt);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(11,79,108,.12), 0 2px 6px rgba(0,0,0,.05);
}
[data-theme="dark"] .hx-admin-tile:hover {
background: rgba(11,79,108,.15);
}
.hx-admin-tile:active { transform: scale(.97); }
.hx-admin-icon {
width: 34px; height: 34px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.hx-admin-icon svg { width: 16px; height: 16px; display: block; }
.hx-admin-name {
font-size: .82rem; font-weight: 700;
color: var(--text); transition: color var(--t);
}
.hx-admin-desc {
font-size: .68rem; color: var(--muted);
transition: color var(--t);
}
/* ══ Footer sticky ══════════════════════════════════════════════════════ */
.hx-footer {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
background: var(--footer-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
/* Barre pleine largeur, mais contenu aligné sur la même largeur que
l'en-tête et les cartes (max 1400px centré, inset 20px). */
padding: .75rem max(1.25rem, calc((100% - 1400px) / 2 + 1.25rem));
display: flex; align-items: center; justify-content: space-between;
transition: background var(--t), border-color var(--t);
}
.hx-footer-user {
display: flex; align-items: center; gap: .6rem;
}
.hx-footer-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--blue);
display: flex; align-items: center; justify-content: center;
font-size: .68rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.hx-footer-name {
font-size: .74rem; font-weight: 700;
color: var(--text); transition: color var(--t);
}
.hx-footer-role {
font-size: .61rem; color: var(--muted);
transition: color var(--t);
}
.hx-logout-btn {
background: none;
border: 1.5px solid var(--border-md);
border-radius: 9px;
padding: .33rem .8rem;
font-size: .68rem; color: var(--muted-dk);
cursor: pointer;
font-family: inherit; font-weight: 600;
transition: border-color var(--t), color var(--t), background var(--t);
}
.hx-logout-btn:hover {
border-color: var(--blue);
color: var(--blue);
}
/* ══ Page inner (pages applicatives) ════════════════════════════════════ */
/* Bandeau page — remplace le greeting sur les pages non-hub */
.hx-page-header {
display: flex; align-items: center; gap: .875rem;
padding: 1.25rem 0 1.5rem;
border-bottom: 1px solid var(--border);
margin-bottom: 1.5rem;
transition: border-color var(--t);
}
.hx-page-icon {
width: 44px; height: 44px; border-radius: 13px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hx-page-icon svg { width: 22px; height: 22px; }
.hx-page-title {
font-size: 1.25rem; font-weight: 900;
color: var(--text); letter-spacing: -.025em;
transition: color var(--t);
}
.hx-page-sub {
font-size: .72rem; color: var(--muted);
margin-top: .1rem; transition: color var(--t);
}
/* Bouton retour hub */
.hx-back-btn {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .72rem; font-weight: 600;
color: var(--muted); text-decoration: none;
padding: .3rem .7rem; border-radius: 8px;
border: 1px solid var(--border-md);
background: var(--surface);
transition: all var(--t);
}
.hx-back-btn:hover {
color: var(--blue); border-color: var(--blue-bd);
background: var(--blue-lt);
}
[data-theme="dark"] .hx-back-btn:hover { background: rgba(11,79,108,.15); }
/* ══ Cards contenu (tableaux, listes, forms) ════════════════════════════ */
.hx-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: background var(--t), border-color var(--t), box-shadow var(--t);
margin-bottom: 1.25rem;
}
.hx-card-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
transition: border-color var(--t);
}
.hx-card-title {
font-size: .85rem; font-weight: 700;
color: var(--text); transition: color var(--t);
}
.hx-card-body { padding: 1.25rem; }
/* ══ Inputs ═════════════════════════════════════════════════════════════ */
.hx-input {
width: 100%; padding: .78rem 1rem;
background: var(--surface2); border: 1.5px solid var(--border-md);
border-radius: 9px; font-size: .93rem;
font-family: inherit; color: var(--text);
outline: none; -webkit-appearance: none; appearance: none;
transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.hx-input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(11,79,108,.1);
background: var(--surface);
}
.hx-label {
display: block; font-size: .68rem; font-weight: 700;
color: var(--muted); margin-bottom: .4rem;
letter-spacing: .06em; text-transform: uppercase;
transition: color var(--t);
}
/* ══ Boutons ════════════════════════════════════════════════════════════ */
.hx-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
padding: .78rem 1.5rem;
border-radius: 9px; border: none;
font-size: .88rem; font-weight: 700;
font-family: inherit; cursor: pointer;
transition: all var(--t); text-decoration: none;
}
.hx-btn-primary {
background: linear-gradient(135deg, var(--orange), var(--orange-dk));
color: #fff;
box-shadow: 0 4px 14px rgba(234,119,34,.35);
}
.hx-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(234,119,34,.5);
}
.hx-btn-blue {
background: var(--blue); color: #fff;
box-shadow: 0 4px 14px rgba(11,79,108,.25);
}
.hx-btn-blue:hover {
background: var(--blue-dk);
transform: translateY(-1px);
}
.hx-btn-outline {
background: transparent;
border: 1.5px solid var(--border-md);
color: var(--muted-dk);
}
.hx-btn-outline:hover {
border-color: var(--blue-bd);
color: var(--blue);
background: var(--blue-lt);
}
/* ══ Badges / Tags ══════════════════════════════════════════════════════ */
.hx-tag {
display: inline-flex; align-items: center;
font-size: .65rem; font-weight: 700;
padding: .18rem .5rem; border-radius: 100px;
}
.hx-tag-orange { background: var(--orange-lt); color: var(--orange-dk); }
.hx-tag-blue { background: var(--blue-lt); color: var(--blue); }
.hx-tag-green { background: var(--green-lt); color: var(--green); }
.hx-tag-purple { background: var(--purple-lt); color: var(--purple); }
.hx-tag-amber { background: var(--amber-lt); color: var(--amber); }
.hx-tag-red { background: var(--red-lt); color: var(--red); }
/* ══ Toast ══════════════════════════════════════════════════════════════ */
.hx-toast {
position: fixed; bottom: 5.5rem; left: 50%;
transform: translateX(-50%) translateY(20px) scale(.94);
z-index: 9999; opacity: 0; pointer-events: none;
transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.hx-toast.show {
opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}
.hx-toast-inner {
background: #1e293b; color: #f1f5f9;
border-radius: 100px; padding: .62rem 1.35rem;
font-size: .82rem; font-weight: 600;
box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2);
white-space: nowrap;
border: 1px solid rgba(255,255,255,.08);
}
[data-theme="dark"] .hx-toast-inner {
background: #334155;
border-color: rgba(255,255,255,.12);
}
/* ══ Offline banner ═════════════════════════════════════════════════════ */
.hx-offline {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
background: #d97706; color: #fff;
text-align: center; padding: .5rem;
font-size: .78rem; font-weight: 600;
transform: translateY(-100%);
transition: transform var(--t);
}
.hx-offline.on { transform: translateY(0); }
/* ══ Tableaux ═══════════════════════════════════════════════════════════ */
.hx-table-wrap { overflow-x: auto; }
.hx-table {
width: 100%; border-collapse: collapse;
font-size: .82rem;
}
.hx-table th {
text-align: left; padding: .75rem 1rem;
font-size: .65rem; font-weight: 700;
color: var(--muted); letter-spacing: .06em;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
transition: color var(--t), border-color var(--t);
}
.hx-table td {
padding: .75rem 1rem;
border-bottom: 1px solid var(--border);
color: var(--text);
transition: color var(--t), border-color var(--t), background var(--t);
}
.hx-table tr:last-child td { border-bottom: none; }
.hx-table tbody tr:hover td { background: var(--surface2); }
/* ══ Scrollbar (WebKit) ═════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* ══ Skeleton loading ═══════════════════════════════════════════════════ */
@keyframes hx-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.hx-skel {
background: linear-gradient(90deg,
var(--surface2) 25%,
var(--border-md) 50%,
var(--surface2) 75%
);
background-size: 200% 100%;
animation: hx-shimmer 1.5s ease infinite;
border-radius: 6px;
display: inline-block;
}
/* ══ Indicateurs de tendance (stats) ════════════════════════════════════ */
.hx-stat-trend {
font-size: .6rem; font-weight: 700;
min-height: 1em; margin: .1rem 0 .15rem;
letter-spacing: .02em; transition: color var(--t);
}
.hx-stat-trend.up { color: var(--green); }
.hx-stat-trend.down { color: var(--danger); }
.hx-stat-trend.flat { color: var(--muted); }
/* Skeleton spécifique stat-value */
.hx-stat-value.loading {
min-width: 48px; height: 32px;
background: linear-gradient(90deg, var(--surface2) 25%, var(--border-md) 50%, var(--surface2) 75%);
background-size: 200% 100%;
animation: hx-shimmer 1.5s ease infinite;
border-radius: 8px;
color: transparent;
}
/* ══ Bottom navigation (mobile PWA) ════════════════════════════════════ */
.hx-bnav {
display: none;
position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
background: var(--nav-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
padding: .45rem 0 calc(.65rem + env(safe-area-inset-bottom, 0px));
flex-direction: row;
justify-content: space-around;
align-items: stretch;
transition: background var(--t), border-color var(--t);
}
@media (max-width: 767px) {
.hx-bnav { display: flex; }
.hx-footer { display: none !important; }
body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
.hx-main { padding-bottom: 1rem; }
}
.hx-bnav-item {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem;
padding: .25rem 0;
text-decoration: none; cursor: pointer;
border: none; background: transparent; font-family: inherit;
color: var(--muted); transition: color var(--t);
-webkit-tap-highlight-color: transparent;
position: relative; overflow: visible;
}
.hx-bnav-item svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.hx-bnav-item span { font-size: .57rem; font-weight: 600; line-height: 1; }
/* ── Couleurs individuelles par icône ── */
.hx-bnav-item[aria-label="Hub"] { color: #EA7722; }
.hx-bnav-item[aria-label="Tarifs"] { color: #2693C7; }
.hx-bnav-item[aria-label="Rapport"] { color: #10B981; }
.hx-bnav-item[aria-label="Contacts"] { color: #8B5CF6; }
.hx-bnav-item[aria-label="Plus"] { color: #6B7280; }
.hx-bnav-item[aria-label="Agents"] { color: #DC2626; }
/* Actif : pill coloré derrière l'icône */
.hx-bnav-item.active::before {
content: '';
position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
width: 48px; height: 30px; border-radius: 15px;
background: currentColor; opacity: .12;
transition: opacity var(--t);
}
/* Badge notification sur item de nav */
.hx-bnav-badge {
position: absolute; top: .1rem; right: 50%;
margin-right: -18px;
min-width: 16px; height: 16px;
background: var(--orange); color: #fff;
font-size: .52rem; font-weight: 800; border-radius: 100px;
display: flex; align-items: center; justify-content: center;
padding: 0 .3rem;
border: 2px solid var(--nav-bg);
}
/* ══ "Plus" sheet (slide-up drawer) ════════════════════════════════════ */
.hx-sheet-overlay {
position: fixed; inset: 0; z-index: 300;
background: rgba(0,0,0,.45);
opacity: 0; pointer-events: none;
transition: opacity .22s ease;
}
.hx-sheet-overlay.open { opacity: 1; pointer-events: all; }
.hx-sheet {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 301;
background: var(--surface);
border-radius: 22px 22px 0 0;
padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
transition: transform .28s cubic-bezier(.4,0,1,1);
box-shadow: 0 -8px 40px rgba(0,0,0,.18);
max-height: 85dvh; overflow-y: auto;
transition: background var(--t), transform .28s cubic-bezier(.4,0,1,1);
}
.hx-sheet.open {
transform: translateY(0);
transition: background var(--t), transform .32s cubic-bezier(.34,1.2,.64,1);
}
.hx-sheet-handle {
width: 36px; height: 4px; border-radius: 2px;
background: var(--border-md); margin: 10px auto 0;
}
.hx-sheet-header {
display: flex; align-items: center; justify-content: space-between;
padding: .875rem 1.25rem .25rem;
}
.hx-sheet-title { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.hx-sheet-close {
width: 28px; height: 28px; border-radius: 50%;
background: var(--surface2); border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--muted); font-size: .9rem;
transition: background var(--t); line-height: 1;
}
.hx-sheet-close:hover { background: var(--border-md); }
.hx-sheet-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: .625rem; padding: .75rem 1.25rem;
}
.hx-sheet-item {
display: flex; align-items: center; gap: .65rem;
padding: .8rem .875rem; border-radius: 14px;
background: var(--surface2); text-decoration: none; color: inherit;
transition: background var(--t), transform var(--t);
-webkit-tap-highlight-color: transparent;
}
.hx-sheet-item:active { transform: scale(.96); }
.hx-sheet-icon {
width: 34px; height: 34px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hx-sheet-icon svg { width: 16px; height: 16px; display: block; }
.hx-sheet-name { font-size: .78rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.hx-sheet-desc { font-size: .6rem; color: var(--muted); margin-top: .1rem; }
.hx-sheet-sep { height: 1px; background: var(--border); margin: .25rem 1.25rem .75rem; }
.hx-sheet-user-row {
display: flex; align-items: center; gap: .75rem;
padding: 0 1.25rem .75rem;
}
.hx-sheet-user-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--blue); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: .72rem; font-weight: 800; flex-shrink: 0;
}
.hx-sheet-user-name { font-size: .82rem; font-weight: 700; color: var(--text); }
.hx-sheet-user-role { font-size: .65rem; color: var(--muted); }
.hx-sheet-logout {
margin: 0 1.25rem;
display: flex; align-items: center; justify-content: center; gap: .5rem;
padding: .8rem; border-radius: 14px;
background: rgba(220,38,38,.06); border: 1.5px solid rgba(220,38,38,.15);
color: var(--red); font-size: .82rem; font-weight: 700;
cursor: pointer; font-family: inherit; width: calc(100% - 2.5rem);
transition: background var(--t), border-color var(--t);
-webkit-tap-highlight-color: transparent;
}
.hx-sheet-logout:hover, .hx-sheet-logout:active { background: rgba(220,38,38,.12); }
/* ══ Responsive — desktop : masquer bottom nav ══════════════════════════ */
@media (min-width: 768px) {
.hx-bnav { display: none !important; }
.hx-sheet, .hx-sheet-overlay { display: none !important; }
/* Bottom nav de la SPA soumission (rendue inline en JSX) */
.hx-bnav-mobile-only { display: none !important; }
}
/* ══ Admin tabs (atabs) — règle centralisée ════════════════════════════
Toutes les pages admin doivent utiliser ces classes sans override local.
Si vous trouvez un bloc dans une page admin,
supprimez-le pour éviter le drift (font-size, max-width, padding). */
.atabs-bar {
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky; top: 51px; z-index: 90;
overflow-x: auto; scrollbar-width: none;
transition: background var(--t, .2s), border-color var(--t, .2s);
}
.atabs-bar::-webkit-scrollbar { display: none; }
.atabs-bar::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; width: 32px;
background: linear-gradient(to right, transparent, var(--surface));
pointer-events: none;
transition: opacity var(--t, .2s);
}
.atabs {
max-width: 1400px; /* aligné sur .hx-navbar-inner et .page (1400px) */
margin: 0 auto;
display: flex;
padding: 0 20px; /* aligné sur .hx-navbar-inner padding-x (20px) */
}
.atab {
flex-shrink: 0;
display: flex; align-items: center; gap: 4px;
padding: 9px 14px;
font-size: 12.5px; /* px : indépendant de root font-size */
font-weight: 600;
color: var(--muted); text-decoration: none;
border: none; background: transparent; font-family: inherit;
border-bottom: 2px solid transparent; cursor: pointer;
white-space: nowrap;
transition: color .12s, border-color .12s;
}
.atab:hover { color: var(--text); }
.atab.active { color: var(--blue); border-bottom-color: var(--blue); }
@media (max-width: 767px) {
.atabs { padding: 0 14px; }
.atab {
padding: 7px 10px;
font-size: 11.5px;
gap: 3px;
}
.atab span[style*="font-size"],
.atab .atab-icon { font-size: 13px; }
}
/* ── Variante pill (tabs compacts, style bouton rempli) ───────────────── */
.atab--pill {
background: var(--surface2);
border-radius: 10px;
border-bottom: none;
padding: .45rem .85rem;
font-size: .8rem;
}
.atab--pill:hover { background: var(--border); color: var(--text); }
.atab--pill.active {
background: var(--blue);
color: #fff;
border-bottom-color: transparent;
box-shadow: 0 2px 8px rgba(11,79,108,.22);
}
[data-theme="dark"] .atab--pill.active {
box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* Accent (orange) pour actions secondaires ex : Historique → */
.atab--pill-accent {
color: var(--orange);
background: rgba(234,119,34,.08);
}
.atab--pill-accent:hover { background: rgba(234,119,34,.15); color: var(--orange); }
.atab--pill-accent.active {
background: var(--orange);
color: #fff;
box-shadow: 0 2px 8px rgba(234,119,34,.3);
}
/* ══ Barre de recherche (hub) ═══════════════════════════════════════════ */
.hx-search-wrap { margin-bottom: 1.25rem; }
.hx-search-inner {
position: relative; display: flex; align-items: center;
}
.hx-search-icon {
position: absolute; left: .9rem;
width: 16px; height: 16px;
color: var(--muted); pointer-events: none; flex-shrink: 0;
transition: color var(--t);
}
.hx-search-input {
width: 100%;
padding: .72rem 2.6rem .72rem 2.65rem;
background: var(--surface);
border: 1.5px solid var(--border-md);
border-radius: 12px;
font-size: .9rem; font-family: inherit; color: var(--text);
outline: none; -webkit-appearance: none; appearance: none;
box-shadow: var(--shadow-sm);
transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.hx-search-input::placeholder { color: var(--muted); }
.hx-search-input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(11,79,108,.1), var(--shadow-sm);
}
.hx-search-input:focus + .hx-search-icon { color: var(--blue); }
.hx-search-clear {
position: absolute; right: 2.8rem;
width: 20px; height: 20px; border-radius: 50%;
background: var(--surface2); border: none;
color: var(--muted); cursor: pointer;
display: none; align-items: center; justify-content: center;
font-size: .72rem; line-height: 1;
transition: background var(--t);
}
.hx-search-clear.on { display: flex; }
.hx-search-clear:hover { background: var(--border-md); color: var(--text); }
.hx-search-kbd {
position: absolute; right: .75rem;
font-size: .62rem; font-weight: 700; color: var(--muted);
background: var(--surface2); border: 1px solid var(--border-md);
border-radius: 5px; padding: .12rem .4rem;
font-family: inherit; pointer-events: none;
transition: opacity var(--t);
}
.hx-search-input:focus ~ .hx-search-kbd,
.hx-search-clear.on ~ .hx-search-kbd { opacity: 0; }
.hx-search-empty {
text-align: center; padding: 2.5rem 1rem;
color: var(--muted); font-size: .85rem;
display: none;
}
.hx-search-empty strong { display: block; font-size: 1.5rem; margin-bottom: .4rem; }
/* ══ TODO — Standardisation à venir ════════════════════════════════════
1. Système de tabs locaux
Coexistent actuellement :
- .atab (admin, ce fichier — la référence)
- .tab-btn (dashboard.html, territoires.html)
- .stab (promo_credits_admin.php)
- .inner-tab (territoires_admin.html — moc-switcher)
- tabs « pills » (rapport/admin.html, /soumission/ React)
Cible : ne garder que .atab (admin) + .atab--pill pour les sous-onglets.
✅ rapport/index.html — migré vers .atab--pill (2026-05-22)
⏳ dashboard.html, territoires.html — .tab-btn à migrer
⏳ promo_credits_admin.php — .stab à migrer
⏳ territoires_admin.html — .inner-tab à migrer
2. Header unifié
Page /soumission/ (SPA React) rend son propre en JSX
(EXCEL-PRO / Tarifs · sous-titre · badge Admin). Pour vraiment
fusionner avec .hx-navbar, refondre le bloc JSX vers la même
structure HTML que les autres pages.
────────────────────────────────────────────────────────────── */
/* ══ Transition de thème fluide ════════════════════════════════════════ */
.hx-theme-transitioning *,
.hx-theme-transitioning *::before,
.hx-theme-transitioning *::after {
transition:
background-color .25s ease,
color .2s ease,
border-color .2s ease,
box-shadow .2s ease !important;
}