/* ============================================================ KOYERA GROUP — site.css (refonte UI/UX v2) Remplacement direct de wwwroot/css/site.css. Aucun nom de classe existant n'a été supprimé : toutes les pages .cshtml actuelles fonctionnent sans modification. Les blocs marqués « NOUVEAU » sont optionnels (topbar, cartes citernes, timeline, stepper, drawer, skeleton). Palette : bleu Koyera #1E6FB5 · or #C8912F · encre #101A24 Typo : Geist (Google Fonts) + Geist Mono pour les chiffres ============================================================ */ /* Polices — à ajouter dans _Layout.cshtml : */ :root { /* Marque */ --bleu: #1E6FB5; --bleu-fonce: #17588F; --bleu-clair: #EAF2FA; --bleu-bord: #D2E3F3; --or: #C8912F; --or-fonce: #A9781F; --gris: #94A3B8; /* Sidebar sombre */ --sidebar: #0F1B26; --sidebar-2: #0B141D; --sidebar-hover: rgba(255,255,255,.07); --sidebar-texte: #AEBECD; --sidebar-section: #5F7285; --sidebar-icone: #7C93A8; /* Surfaces & encre */ --fond: #F5F7FA; --carte: #FFFFFF; --carte-2: #FCFDFE; --encre: #101A24; --encre-doux: #475569; --muted: #94A3B8; --trait: #E6EBF1; --trait-fort: #DDE4EC; /* Statuts */ --succes: #12734F; --succes-bg: #E8F5EE; --succes-bord: #CBE9DA; --succes-plein: #12855A; --alerte: #9A6410; --alerte-bg: #FDF3E2; --alerte-bord: #F5E2BE; --alerte-plein: #B45309; --danger: #B3312B; --danger-bg: #FCEBEA; --danger-bord: #F6D3D0; --danger-plein: #C2352F; --info: #1A5F9E; --info-bg: #EAF2FA; --info-bord: #D2E3F3; --info-plein: #1E6FB5; --neutre: #566372; --neutre-bg: #F1F4F8; --neutre-bord: #E2E8F0; --neutre-plein: #64748B; --or-bg: #FBF2DF; --or-txt: #8A6415; --or-bord: #F0E0BA; /* Formes */ --rayon: 14px; --rayon-sm: 10px; --rayon-xs: 8px; --ombre: 0 1px 2px rgba(16,26,36,.04); --ombre-moy: 0 6px 20px rgba(16,26,36,.07); --ombre-forte: 0 28px 70px rgba(15,27,38,.32); --sidebar-larg: 246px; --sidebar-larg-reduite: 68px; /* Densité (compact par défaut ; ajouter la classe .confortable sur ) */ --cellule-y: 11px; --cellule-x: 12px; } body.confortable { --cellule-y: 15px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--fond); color: var(--encre); font-family: Geist, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--bleu); text-decoration: none; } a:hover { color: var(--bleu-fonce); text-decoration: underline; } h1, h2, h3 { color: var(--encre); letter-spacing: -.015em; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #C8D2DE; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } /* Material Symbols */ .ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; white-space: nowrap; display: inline-block; vertical-align: middle; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; user-select: none; flex: none; } .ms.fill { font-variation-settings: "FILL" 1; } /* Chiffres : toujours tabulaires et en Geist Mono */ .mono, .num, .kpi-valeur, .remplissage-val { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } /* ============================================================ Ossature : sidebar + zone ============================================================ */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-larg); flex: 0 0 var(--sidebar-larg); background: var(--sidebar); color: var(--sidebar-texte); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .16s ease, flex-basis .16s ease; } .sidebar-marque { height: 64px; flex: none; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.07); } .sidebar-logo { max-width: 100%; height: 34px; object-fit: contain; } .sidebar-nav { padding: 10px 10px 16px; flex: 1; } .nav-section { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sidebar-section); padding: 16px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin: 2px 0; border-radius: 9px; color: var(--sidebar-texte); text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.2; transition: background .12s ease, color .12s ease; } .nav-item .ms { font-size: 20px; color: var(--sidebar-icone); transition: color .12s ease; } .nav-item:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; } .nav-item:hover .ms { color: #CDD8E3; } .nav-item.actif { background: var(--bleu); color: #fff; box-shadow: inset 3px 0 0 var(--or); font-weight: 600; } .nav-item.actif .ms { color: #fff; } .nav-libelle { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Compteur d'items à traiter (ex. approvisionnements en attente) */ .nav-pastille { min-width: 20px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--danger-plein); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .sidebar-pied { margin-top: auto; flex: none; padding: 12px; border-top: 1px solid rgba(255,255,255,.07); background: var(--sidebar-2); } .sidebar-pied .util { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--rayon-sm); background: rgba(255,255,255,.05); margin-bottom: 10px; } .sidebar-pied .util .ms { font-size: 26px; color: var(--sidebar-icone); } .util-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .util-nom { color: #E7EDF3; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .util-role { color: var(--sidebar-section); font-size: 11.5px; } .btn-deco { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--sidebar-texte); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-deco:hover { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.26); } .btn-deco .ms { font-size: 18px; } .zone { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Le contenu est plafonné pour rester lisible sur très grand écran, MAIS il récupère la place libérée quand la barre latérale est repliée (sinon un vide apparaît à droite). */ .contenu { padding: 24px 28px 64px; width: 100%; max-width: 1620px; } body.sidebar-reduite .contenu { max-width: calc(1620px + var(--sidebar-larg) - var(--sidebar-larg-reduite)); } /* NOUVEAU — Topbar desktop (multi-stations, recherche, alertes, profil). Structure suggérée :
…
…
*/ .topbar { position: sticky; top: 0; z-index: 30; height: 64px; flex: none; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); display: flex; align-items: center; gap: 14px; padding: 0 24px; } .topbar-btn { width: 36px; height: 36px; flex: none; border: 1px solid var(--neutre-bord); background: #fff; border-radius: var(--rayon-sm); color: var(--encre-doux); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .topbar-btn:hover { background: #F1F5F9; } .topbar-btn .pastille { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger-plein); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .station-select { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid var(--neutre-bord); background: #fff; border-radius: var(--rayon-sm); cursor: pointer; text-align: left; font: inherit; } .station-select:hover { border-color: #CBD5E1; } .station-select .ms { font-size: 19px; color: var(--bleu); } .station-select .lib { display: flex; flex-direction: column; line-height: 1.15; } .station-select .lib b { font-size: 13.5px; font-weight: 600; color: var(--encre); } .station-select .lib span { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .recherche-globale { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border: 1px solid var(--neutre-bord); background: #F8FAFC; border-radius: var(--rayon-sm); } .recherche-globale:focus-within { border-color: var(--bleu); background: #fff; box-shadow: 0 0 0 3px rgba(30,111,181,.13); } .recherche-globale input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; } .recherche-globale .raccourci-clavier { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--muted); border: 1px solid var(--neutre-bord); border-radius: 6px; padding: 1px 6px; background: #fff; } .topbar-fin { margin-left: auto; display: flex; align-items: center; gap: 8px; } .profil-btn { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 6px; border: 1px solid transparent; background: transparent; border-radius: var(--rayon-sm); cursor: pointer; font: inherit; } .profil-btn:hover { background: #F1F5F9; } .avatar { width: 32px; height: 32px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--sidebar); color: #fff; } .avatar-bleu { background: var(--bleu-clair); color: var(--info); } .avatar-or { background: var(--or-bg); color: var(--or-txt); } .avatar-neutre { background: var(--neutre-bg); color: var(--neutre); } .menu-flottant { position: absolute; top: 48px; right: 0; min-width: 216px; z-index: 40; background: #fff; border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 12px 34px rgba(16,26,36,.14); padding: 6px; animation: koyera-apparition .14s ease; } .menu-flottant a, .menu-flottant button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--encre); text-align: left; cursor: pointer; } .menu-flottant a:hover, .menu-flottant button:hover { background: var(--fond); text-decoration: none; } .menu-flottant .danger { color: var(--danger); } /* Barre mobile (masquée en desktop) */ .appbar { display: none; align-items: center; gap: 12px; padding: 10px 14px; background: var(--sidebar); color: #fff; position: sticky; top: 0; z-index: 30; } .appbar-logo { height: 28px; } .appbar .burger { background: transparent; border: 0; color: #fff; cursor: pointer; padding: 4px; } .appbar .burger .ms { font-size: 26px; } .appbar-deco { margin-left: auto; } .voile-sidebar { display: none; } /* ============================================================ En-tête de page (fil d'ariane + titre + actions) ============================================================ */ .page-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .fil { font-size: 12.5px; color: var(--muted); margin-bottom: 7px; } .fil a { color: var(--muted); } .fil a:hover { color: var(--bleu); } .fil .sep { margin: 0 6px; opacity: .7; } .page-titre { font-size: 24px; font-weight: 650; margin: 0; letter-spacing: -.022em; } .page-sous { color: var(--encre-doux); font-size: 14px; margin: 6px 0 0; max-width: 64ch; text-wrap: pretty; } .page-actions { display: flex; gap: 9px; flex-wrap: wrap; } /* ============================================================ Cartes ============================================================ */ .carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px 20px; } .carte + .carte { margin-top: 16px; } .carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .carte-titre { font-size: 15.5px; font-weight: 650; margin: 0; letter-spacing: -.012em; } .carte-sous { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; } /* Cartes KPI */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; margin-bottom: 18px; } .kpi { position: relative; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 15px 17px; display: flex; flex-direction: column; gap: 4px; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .kpi:hover { box-shadow: var(--ombre-moy); transform: translateY(-1px); } .kpi-label { color: var(--encre-doux); font-size: 12.5px; font-weight: 600; } /* La valeur s'adapte à la largeur disponible : un montant long rétrécit au lieu de passer à la ligne et de déséquilibrer les cartes. */ .kpi-valeur { font-size: clamp(16px, 1.3vw, 21px); font-weight: 600; color: var(--encre); line-height: 1.18; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; /* jamais de débordement hors de la carte */ hyphens: none; } .kpi-sous { color: var(--muted); font-size: 12px; } /* Filet de couleur en haut de carte (remplace la bordure gauche) */ .kpi.accent-bleu::before, .kpi.accent-or::before, .kpi.accent-succes::before, .kpi.accent-alerte::before, .kpi.accent-danger::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: .85; } .kpi.accent-bleu::before { background: var(--bleu); } .kpi.accent-or::before { background: var(--or); } .kpi.accent-succes::before { background: var(--succes-plein); } .kpi.accent-alerte::before { background: var(--alerte-plein); } .kpi.accent-danger::before { background: var(--danger-plein); } /* Évolution vs période précédente */ .kpi-delta { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-top: 5px; background: var(--neutre-bg); color: var(--neutre); } .kpi-delta .ms { font-size: 14px; } .kpi-delta.hausse { background: var(--succes-bg); color: var(--succes); } .kpi-delta.baisse { background: var(--danger-bg); color: var(--danger); } /* Petite icône ronde en haut à droite */ .kpi-icone { position: absolute; top: 14px; right: 15px; width: 28px; height: 28px; border-radius: var(--rayon-xs); display: flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info); } .kpi-icone .ms { font-size: 17px; } /* ============================================================ Barre d'outils (recherche + filtres) ============================================================ */ .barre-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .recherche { flex: 1 1 260px; min-width: 220px; max-width: 380px; display: flex; align-items: center; gap: 9px; height: 38px; background: var(--carte); border: 1px solid var(--neutre-bord); border-radius: var(--rayon-sm); padding: 0 12px; } .recherche .ms { color: var(--muted); font-size: 19px; } .recherche input { border: 0; outline: none; background: transparent; width: 100%; padding: 0; font: inherit; font-size: 13.5px; color: var(--encre); } .recherche:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(30,111,181,.13); } .filtre { height: 38px; background: var(--carte); border: 1px solid var(--neutre-bord); border-radius: var(--rayon-sm); padding: 0 12px; color: var(--encre); font: inherit; font-size: 13.5px; font-weight: 500; min-width: 150px; } select.filtre { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; } select.filtre:hover { border-color: #CBD5E1; } select.filtre:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(30,111,181,.13); outline: none; } .barre-outils .fin { margin-left: auto; display: flex; align-items: center; gap: 8px; } .barre-outils .compte { font-size: 12.5px; color: var(--muted); } /* ============================================================ Boutons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; background: var(--bleu); color: #fff; border: 1px solid var(--bleu); border-radius: var(--rayon-sm); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(16,26,36,.12); transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } .btn:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn .ms { font-size: 19px; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-fantome { background: #fff; color: #334155; border-color: var(--neutre-bord); box-shadow: none; } .btn-fantome:hover { background: #F1F5F9; color: #334155; border-color: var(--neutre-bord); } .btn-plat { background: transparent; color: var(--encre-doux); border-color: transparent; box-shadow: none; } .btn-plat:hover { background: transparent; color: var(--bleu); border-color: transparent; } .btn-doux { background: var(--bleu-clair); color: var(--info); border-color: transparent; box-shadow: none; } .btn-doux:hover { background: #D9E9F7; color: var(--info); border-color: transparent; } .btn-sombre { background: #243040; color: #fff; border-color: #243040; } .btn-sombre:hover { background: #16202C; border-color: #16202C; color: #fff; } .btn-danger { background: var(--danger-plein); color: #fff; border-color: var(--danger-plein); } .btn-danger:hover { background: #A72B26; border-color: #A72B26; color: #fff; } .btn-or { background: var(--or); color: #fff; border-color: var(--or); } .btn-or:hover { background: var(--or-fonce); border-color: var(--or-fonce); color: #fff; } .btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; } .btn-sm .ms { font-size: 17px; } .btn-icone { width: 38px; padding: 0; } .btn-icone.btn-sm { width: 32px; } .btn-bloc { width: 100%; } /* Boutons « raccourci » du tableau de bord */ .raccourcis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .raccourci { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-sm); box-shadow: var(--ombre); font-size: 13.5px; font-weight: 600; color: #243040; cursor: pointer; text-decoration: none; transition: border-color .12s ease, color .12s ease; } .raccourci .ms { font-size: 19px; color: var(--bleu); } .raccourci:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; } /* ============================================================ Badges de statut ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--neutre-bg); color: var(--neutre); border: 1px solid var(--neutre-bord); } .badge .ms { font-size: 14px; } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; opacity: .85; } .badge.sans-puce::before { display: none; } .badge-succes { background: var(--succes-bg); color: var(--succes); border-color: var(--succes-bord); } .badge-alerte { background: var(--alerte-bg); color: var(--alerte); border-color: var(--alerte-bord); } .badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bord); } .badge-info { background: var(--info-bg); color: var(--info); border-color: var(--info-bord); } .badge-neutre { background: var(--neutre-bg); color: var(--neutre); border-color: var(--neutre-bord); } .badge-or { background: var(--or-bg); color: var(--or-txt); border-color: var(--or-bord); } /* ============================================================ Tableaux ============================================================ */ .tableau-enveloppe { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; } .tableau-scroll { overflow-x: auto; } .tableau { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tableau thead th { background: #FAFBFD; color: var(--encre-doux); text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; padding: 11px var(--cellule-x); border-bottom: 1px solid var(--trait); white-space: nowrap; position: sticky; top: 0; z-index: 1; } /* L'en-tête suit l'alignement de sa colonne : sans cette règle, « .tableau thead th » (spécificité supérieure) forcerait « text-align: left » sur les colonnes chiffrées. */ .tableau thead th.txt-droite { text-align: right; } .tableau thead th.txt-centre { text-align: center; } .tableau thead th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; } .tableau thead th a:hover { color: var(--bleu); text-decoration: none; } .tableau tbody td { padding: var(--cellule-y) var(--cellule-x); border-bottom: 1px solid #F1F5F9; color: var(--encre); vertical-align: middle; } .tableau tbody tr:hover { background: #FAFBFD; } .tableau tbody tr:last-child td { border-bottom: 0; } .tableau .num { text-align: right; white-space: nowrap; font-weight: 600; } .tableau .txt-muted { color: var(--muted); } /* Cellule à deux niveaux : libellé fort + précision grise */ .cel-duo { display: flex; flex-direction: column; line-height: 1.3; } .cel-duo b { font-weight: 600; } .cel-duo span { font-size: 12px; color: var(--muted); } /* Cellule avec avatar */ .cel-avatar { display: inline-flex; align-items: center; gap: 10px; } /* Colonne d'actions en bout de ligne */ .actions-ligne { text-align: right; white-space: nowrap; } .actions-ligne a, .actions-ligne .lien-action { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 5px; border: 1px solid var(--trait); border-radius: var(--rayon-xs); background: #fff; color: var(--encre-doux); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; padding: 0; transition: background .12s ease, border-color .12s ease, color .12s ease; } .actions-ligne a .ms, .actions-ligne .lien-action .ms { font-size: 18px; } .actions-ligne a:hover, .actions-ligne .lien-action:hover { background: #F1F5F9; text-decoration: none; color: var(--encre); } .actions-ligne a.danger, .actions-ligne .lien-action.danger { color: var(--danger); } .actions-ligne a.danger:hover, .actions-ligne .lien-action.danger:hover { background: var(--danger-bg); border-color: var(--danger-bord); } .actions-ligne .form-enligne { display: inline; } /* Variante texte (si l'on préfère conserver des liens libellés) */ .actions-ligne.texte a, .actions-ligne.texte .lien-action { width: auto; height: auto; border: 0; background: none; color: var(--bleu); margin-left: 14px; font-size: 13.5px; } .actions-ligne.texte a:hover, .actions-ligne.texte .lien-action:hover { background: none; text-decoration: underline; } /* Pied de tableau (compteur + pagination intégrée) */ .tableau-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid #F1F5F9; background: var(--carte-2); font-size: 12.5px; color: var(--encre-doux); } /* Message d'erreur dans une modale de formulaire */ .modale-msg { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bord); border-radius: var(--rayon-sm); padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; } /* État vide */ .vide { text-align: center; color: var(--muted); padding: 46px 16px; } .vide .ms { font-size: 34px; display: block; margin: 0 auto 8px; color: #CBD5E1; } .vide b { display: block; color: var(--encre); font-size: 14.5px; font-weight: 650; margin-bottom: 4px; } /* NOUVEAU — chargement squelette */ .skeleton { border-radius: 6px; background: #EEF2F6; animation: koyera-pulse 1.4s ease-in-out infinite; } .skeleton-ligne { height: 12px; margin: 8px 0; } @keyframes koyera-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* ============================================================ Formulaires ============================================================ */ label { font-size: 12.5px; color: var(--encre); font-weight: 600; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], select, textarea { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--neutre-bord); border-radius: var(--rayon-sm); background: #fff; color: var(--encre); font: inherit; font-size: 13.5px; } textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; } input::placeholder, textarea::placeholder { color: #A9B4C2; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(30,111,181,.13); } input[type=number] { font-family: "Geist Mono", monospace; font-weight: 600; text-align: right; } input[type=checkbox], input[type=radio] { width: 15px; height: 15px; accent-color: var(--bleu); } .grille-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; } .champ-oeil { position: relative; } .champ-oeil button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted); padding: 6px; } .aide { color: var(--muted); font-size: 12px; } .obligatoire { color: var(--danger); } .champ-erreur input, .champ-erreur select, .champ-erreur textarea { border-color: var(--danger-plein); } .champ-erreur .aide { color: var(--danger); } /* NOUVEAU — sélecteur segmenté (onglets de formulaire, séries de graphique) */ .segments { display: inline-flex; gap: 3px; background: #F1F5F9; border-radius: var(--rayon-sm); padding: 3px; } .segments button { height: 30px; padding: 0 13px; border: 0; border-radius: var(--rayon-xs); background: transparent; color: var(--encre-doux); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .segments button.actif { background: #fff; color: var(--encre); box-shadow: 0 1px 2px rgba(16,26,36,.1); } /* ============================================================ Flash / alertes ============================================================ */ .flash { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--rayon-sm); margin: 16px 28px 0; border: 1px solid transparent; font-size: 13.5px; font-weight: 500; } .contenu > .flash:first-child { margin-top: 0; } .flash .ms { font-size: 19px; } .flash-succes { background: var(--succes-bg); color: var(--succes); border-color: var(--succes-bord); } .flash-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bord); } .flash-alerte { background: var(--alerte-bg); color: var(--alerte); border-color: var(--alerte-bord); } .flash-info { background: var(--info-bg); color: var(--info); border-color: var(--info-bord); } /* NOUVEAU — liste d'alertes du tableau de bord */ .alertes { display: flex; flex-direction: column; } .alerte-item { display: flex; gap: 11px; align-items: flex-start; padding: 12px 0; border-top: 1px solid #F3F6F9; } .alerte-item:first-child { border-top: 0; } .alerte-item .puce { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; } .alerte-item .puce.danger { background: var(--danger-plein); box-shadow: 0 0 0 3px var(--danger-bg); } .alerte-item .puce.alerte { background: var(--alerte-plein); box-shadow: 0 0 0 3px var(--alerte-bg); } .alerte-item .puce.info { background: var(--info-plein); box-shadow: 0 0 0 3px var(--info-bg); } .alerte-item .txt { flex: 1; min-width: 0; } .alerte-item .txt b { display: block; font-size: 13.5px; font-weight: 600; } .alerte-item .txt span { font-size: 12.5px; color: var(--encre-doux); } /* NOUVEAU — timeline d'activité / historique */ .timeline { display: flex; flex-direction: column; } .timeline-item { display: grid; grid-template-columns: 62px 26px 1fr auto; gap: 12px; align-items: start; padding: 13px 0; border-top: 1px solid #F3F6F9; } .timeline-item .heure { font-family: "Geist Mono", monospace; font-size: 12.5px; color: var(--muted); padding-top: 3px; } .timeline-item .ico { width: 26px; height: 26px; border-radius: var(--rayon-xs); display: flex; align-items: center; justify-content: center; background: var(--neutre-bg); color: var(--neutre); } .timeline-item .ico .ms { font-size: 15px; } .timeline-item .ico.succes { background: var(--succes-bg); color: var(--succes); } .timeline-item .ico.info { background: var(--info-bg); color: var(--info); } .timeline-item .ico.alerte { background: var(--alerte-bg); color: var(--alerte); } .timeline-item b { font-size: 13.5px; font-weight: 600; } .timeline-item p { margin: 1px 0 0; font-size: 12.5px; color: var(--encre-doux); } .timeline-item .montant { font-family: "Geist Mono", monospace; font-size: 13px; font-weight: 600; white-space: nowrap; } .timeline-item .montant.pos { color: var(--succes); } .timeline-item .montant.neg { color: var(--danger); } /* NOUVEAU — stepper de workflow (approvisionnements) */ .stepper { display: flex; align-items: flex-start; } .etape { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .etape::before { content: ""; position: absolute; top: 21px; left: 50%; right: -50%; height: 2px; background: var(--trait); z-index: 1; } .etape:last-child::before { display: none; } .etape.fait::before { background: var(--succes-plein); } .etape .rond { width: 42px; height: 42px; border-radius: 50%; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; background: #F1F5F9; color: var(--muted); border: 1px solid var(--trait); } .etape.fait .rond { background: var(--succes-bg); color: var(--succes); border-color: var(--succes-bord); } .etape.courant .rond { background: var(--bleu); color: #fff; border: 3px solid var(--bleu-bord); } .etape .lib { font-size: 13px; font-weight: 600; margin-top: 9px; } .etape.courant .lib { color: var(--bleu); font-weight: 700; } .etape .date { font-size: 11.5px; color: var(--muted); margin-top: 2px; } /* ============================================================ Modale + drawer ============================================================ */ .modale-fond { position: fixed; inset: 0; z-index: 100; background: rgba(15,27,38,.5); display: none; align-items: center; justify-content: center; padding: 24px; } .modale-fond.ouvert { display: flex; } .modale { background: #fff; border-radius: 16px; box-shadow: var(--ombre-forte); width: 100%; max-width: 560px; overflow: hidden; animation: koyera-apparition .16s ease-out; /* Un formulaire long ne doit jamais dépasser l'écran : le contenu défile, l'entête et les boutons restent visibles. */ max-height: calc(100vh - 48px); display: flex; flex-direction: column; } .modale > .modale-tete, .modale > form > .modale-pied, .modale > .modale-pied { flex: none; } .modale > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .modale > form > .modale-2col, .modale > form > .modale-corps, .modale > .modale-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .modale-sm { max-width: 420px; } .modale-lg { max-width: 840px; } @keyframes koyera-apparition { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } .modale-tete { display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-bottom: 1px solid #EEF2F6; } .modale-tete .ico { width: 38px; height: 38px; border-radius: 11px; flex: none; background: var(--bleu-clair); color: var(--bleu); display: flex; align-items: center; justify-content: center; } .modale-titre { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.015em; } .modale-soustitre { color: var(--encre-doux); font-size: 12.5px; margin-top: 2px; } .modale-fermer { width: 34px; height: 34px; margin-left: auto; flex: none; background: #F1F5F9; border: 0; border-radius: 9px; cursor: pointer; color: var(--encre-doux); display: flex; align-items: center; justify-content: center; } .modale-fermer:hover { background: var(--neutre-bord); color: var(--encre); } .modale-corps { padding: 20px 22px; } .modale-pied { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; padding: 15px 22px 18px; border-top: 1px solid #EEF2F6; background: var(--carte-2); } /* Colonne récapitulative à droite d'une modale (ex. nouvelle vente) */ .modale-2col { display: grid; grid-template-columns: 1.45fr 1fr; } .modale-recap { background: var(--carte-2); border-left: 1px solid #EEF2F6; padding: 20px 22px; display: flex; flex-direction: column; } .modale-recap .titre { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* Totaux : ils rétrécissent sur les gros montants plutôt que de déborder du bloc. */ .modale-recap .total { font-family: "Geist Mono", monospace; font-size: clamp(19px, 1.6vw, 26px); font-weight: 650; letter-spacing: -.03em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* Drawer latéral (fiche client / fournisseur) */ .drawer-fond { position: fixed; inset: 0; z-index: 95; background: rgba(15,27,38,.4); display: none; justify-content: flex-end; } .drawer-fond.ouvert { display: flex; } .drawer { width: 100%; max-width: 468px; height: 100%; background: #fff; box-shadow: -18px 0 50px rgba(15,27,38,.2); display: flex; flex-direction: column; animation: koyera-glisse .2s ease; } @keyframes koyera-glisse { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .drawer-tete { padding: 20px 22px; border-bottom: 1px solid #EEF2F6; display: flex; align-items: flex-start; gap: 13px; } .drawer-corps { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; } .drawer-pied { padding: 16px 22px; border-top: 1px solid #EEF2F6; display: flex; gap: 9px; } /* ============================================================ Pagination ============================================================ */ .pagination { display: flex; gap: 5px; justify-content: center; align-items: center; margin-top: 16px; flex-wrap: wrap; } .tableau-pied .pagination { margin-top: 0; } .pagination .pg-btn { min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--neutre-bord); border-radius: var(--rayon-xs); background: #fff; color: var(--encre-doux); font-size: 13px; font-weight: 600; text-decoration: none; } .pagination a.pg-btn:hover { background: #F1F5F9; color: var(--encre); text-decoration: none; } .pagination .pg-actif { background: var(--bleu); border-color: var(--bleu); color: #fff; } .pagination .pg-off { opacity: .4; pointer-events: none; } .pagination .pg-gap { min-width: 20px; text-align: center; color: var(--muted); border: 0; } /* ============================================================ Jauges & citernes ============================================================ */ .jauge { display: inline-block; width: 74px; height: 6px; background: #F1F5F9; border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: 9px; } .jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--info-plein); } .jauge.succes > span { background: var(--succes-plein); } .jauge.alerte > span { background: var(--alerte-plein); } .jauge.danger > span { background: var(--danger-plein); } .remplissage-val { font-size: 12.5px; font-weight: 600; } /* NOUVEAU — carte citerne avec jauge verticale */ .citernes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 16px; } .citerne-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px 19px; } .citerne-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .citerne-tete b { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; } .citerne-tete span { display: block; font-size: 12.5px; color: var(--encre-doux); margin-top: 2px; } .citerne-corps { display: flex; gap: 16px; margin-top: 16px; } .cuve { width: 56px; height: 150px; border-radius: 11px; flex: none; position: relative; overflow: hidden; background: #F1F5F9; border: 1px solid var(--trait); } .cuve > .niveau { position: absolute; left: 0; right: 0; bottom: 0; background: var(--info-plein); } .cuve.succes > .niveau { background: linear-gradient(180deg, #12855ACC, #12855A); } .cuve.alerte > .niveau { background: linear-gradient(180deg, #B45309CC, #B45309); } .cuve.danger > .niveau { background: linear-gradient(180deg, #C2352FCC, #C2352F); } .cuve > .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Geist Mono", monospace; font-size: 15px; font-weight: 700; color: var(--encre); text-shadow: 0 1px 0 rgba(255,255,255,.7); } .citerne-lignes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; } .citerne-lignes .lg em { display: block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .citerne-lignes .lg b { font-family: "Geist Mono", monospace; font-size: 14.5px; font-weight: 600; } .citerne-pied { display: flex; gap: 8px; margin-top: 16px; } /* Liste d'informations (modale « Voir ») */ .infos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; } .infos > div { display: flex; flex-direction: column; gap: 2px; } .infos dt { font-size: 11.5px; color: var(--muted); font-weight: 600; } .infos dd { margin: 0; font-size: 14.5px; color: var(--encre); } @media (max-width: 560px) { .infos { grid-template-columns: 1fr; } } /* ============================================================ Utilitaires ============================================================ */ .muted { color: var(--muted); } .txt-droite { text-align: right; } .txt-centre { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-16 { margin-top: 16px; } .mb-16 { margin-bottom: 16px; } .grille-2 { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; align-items: start; } .grille-2-egal { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .pile { display: flex; flex-direction: column; gap: 16px; } .rangee { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nowrap { white-space: nowrap; } code { background: #EEF2F6; padding: 1px 6px; border-radius: 5px; font-size: .9em; font-family: "Geist Mono", monospace; } /* Accessibilité : focus clavier visible */ a:focus-visible, button:focus-visible, .btn:focus-visible, [data-modale-ouvrir]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1240px) { .grille-2, .grille-2-egal, .modale-2col { grid-template-columns: 1fr; } .modale-recap { border-left: 0; border-top: 1px solid #EEF2F6; } } @media (max-width: 960px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.35); } .sidebar.ouvert { transform: translateX(0); } .sidebar.ouvert ~ .voile-sidebar { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(12,20,28,.45); } .appbar { display: flex; } .topbar { display: none; } .contenu { padding: 16px 16px 88px; } .flash { margin-left: 16px; margin-right: 16px; } .page-titre { font-size: 21px; } .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .kpi-valeur { font-size: clamp(16px, 4.6vw, 20px); } /* Cibles tactiles */ .btn { height: 44px; } .actions-ligne a, .actions-ligne .lien-action { width: 36px; height: 36px; } input, select, textarea { height: 46px; } /* Barre d'actions basse (facultative) : */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; background: #fff; border-top: 1px solid var(--trait); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 10.5px; font-weight: 600; color: var(--muted); text-decoration: none; } .bottom-nav a.actif { color: var(--bleu); } .bottom-nav .ms { font-size: 22px; } } @media (min-width: 961px) { .bottom-nav { display: none; } } @media (max-width: 640px) { /* Tableaux transformés en cartes : ajouter data-libelle="Colonne" sur chaque */ .tableau.cartes, .tableau.cartes thead, .tableau.cartes tbody, .tableau.cartes tr, .tableau.cartes td { display: block; width: 100%; } .tableau.cartes thead { display: none; } .tableau.cartes tr { border: 1px solid var(--trait); border-radius: var(--rayon-sm); margin-bottom: 10px; padding: 6px 12px; background: #fff; } .tableau.cartes tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #EEF2F6; text-align: right; } .tableau.cartes tbody td::before { content: attr(data-libelle); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; } .tableau.cartes tbody td:last-child { border-bottom: 0; } } @media print { .sidebar, .topbar, .appbar, .page-actions, .barre-outils, .voile-sidebar, .bottom-nav { display: none !important; } .zone, .contenu { padding: 0; } body { background: #fff; } .carte, .tableau-enveloppe, .kpi { box-shadow: none; border-color: #D8DEE6; } } /* ============================================================ COMPOSANTS DE LA REFONTE — classes utilisées par les vues fournies dans handoff-koyera/Pages/. Ajoutées après le socle pour que le remplacement de site.css reste un simple copier-coller. ============================================================ */ /* ---- Sidebar : bloc de marque + bouton déconnexion compact ---- */ .sidebar-marque-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .sidebar-marque-txt strong { font-size: 14.5px; font-weight: 650; color: #fff; } .sidebar-marque-txt span { font-size: 11px; color: #7C8FA2; letter-spacing: .04em; } .btn-deco-icone { width: 30px; height: 30px; border: 0; border-radius: var(--rayon-xs); background: transparent; color: var(--sidebar-section); cursor: pointer; display: flex; align-items: center; justify-content: center; } .btn-deco-icone:hover { background: rgba(255,255,255,.08); color: #fff; } .btn-deco-icone .ms { font-size: 19px; } /* ---- Sidebar réduite (desktop) ---- */ body.sidebar-reduite .sidebar { width: var(--sidebar-larg-reduite); flex-basis: var(--sidebar-larg-reduite); } body.sidebar-reduite .sidebar-marque-txt, body.sidebar-reduite .nav-libelle, body.sidebar-reduite .nav-pastille, body.sidebar-reduite .util-info, body.sidebar-reduite .sidebar-pied form { display: none; } body.sidebar-reduite .nav-section { height: 1px; padding: 0; margin: 14px 8px; overflow: hidden; background: rgba(255,255,255,.07); color: transparent; } body.sidebar-reduite .nav-item { justify-content: center; padding: 9px 0; } body.sidebar-reduite .sidebar-marque { justify-content: center; padding: 0 10px; } body.sidebar-reduite .sidebar-pied .util { justify-content: center; } /* ---- Topbar : ancrage des menus, séparateur, bloc profil ---- */ .menu-ancre { position: relative; flex: none; } .menu-flottant.menu-gauche { left: 0; right: auto; width: 260px; } .menu-flottant.menu-large { width: 352px; padding: 0; overflow: hidden; } .menu-2l { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .menu-2l b { font-weight: 600; font-size: 13.5px; } .menu-2l span { font-size: 11.5px; color: var(--muted); } .menu-check { margin-left: auto; color: var(--bleu); font-size: 18px; } .topbar-sep { width: 1px; height: 26px; background: var(--trait); margin: 0 4px; } .profil-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .profil-txt b { font-size: 13px; font-weight: 600; } .profil-txt span { font-size: 11px; color: var(--muted); } /* ---- Panneau d'alertes ---- */ .alertes-tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #EEF2F6; font-size: 14px; font-weight: 650; } .alertes-pied { padding: 11px 16px; text-align: center; border-top: 1px solid #F3F6F9; font-size: 13px; font-weight: 600; } .alertes-panneau .alerte-item { padding: 13px 16px; border-top: 0; border-bottom: 1px solid #F3F6F9; } a.alerte-item { color: inherit; text-decoration: none; } a.alerte-item:hover { background: #F8FAFC; text-decoration: none; } .alerte-chevron { margin-left: auto; color: #CBD5E1; font-size: 18px; align-self: center; } /* ---- Modales : icône danger et texte ---- */ .modale-ico-danger { width: 44px; height: 44px; border-radius: 12px; background: var(--danger-bg); color: var(--danger-plein); display: flex; align-items: center; justify-content: center; } .modale-ico-danger .ms { font-size: 24px; } .modale-texte { margin: 0; color: var(--encre-doux); font-size: 13.5px; line-height: 1.6; } .modale-corps > .vide { padding: 28px 10px; } /* ---- Fil d'Ariane : segment courant ---- */ .fil-actif { color: var(--encre-doux); font-weight: 600; } /* ---- Cartes KPI : variantes d'icône ---- */ .kpi-icone.vert { background: var(--succes-bg); color: var(--succes); } .kpi-icone.or { background: var(--or-bg); color: var(--or-txt); } .kpi-icone.orange{ background: var(--alerte-bg); color: var(--alerte); } .kpi-icone.gris { background: var(--neutre-bg); color: var(--neutre); } /* ---- Filtre de période du tableau de bord ---- */ .filtre-periode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filtre-periode input[type=date] { width: auto; height: 38px; } .sep-periode { color: var(--muted); font-size: 13px; } /* ---- Graphique ---- */ .graphe-zone { position: relative; height: 250px; } .total-serie { font-size: clamp(19px, 1.6vw, 26px); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .lien-carte { font-size: 13px; font-weight: 600; } .segments button .ms { font-size: 18px; display: block; } /* ---- Ventes par produit ---- */ .rang-produit { padding: 13px 0; border-bottom: 1px solid #F3F6F9; } .rang-produit:last-child { border-bottom: 0; } .rp-nom { font-size: 13.5px; font-weight: 600; } .rp-montant { font-size: 13px; font-weight: 600; } .rp-jauge { width: 100%; height: 7px; margin: 9px 0 6px; } /* ---- Mini-citernes du tableau de bord ---- */ .mini-citernes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .mini-citerne { display: flex; gap: 13px; padding: 14px; background: var(--carte-2); border: 1px solid #EEF2F6; border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .12s ease; } .mini-citerne:hover { border-color: var(--bleu-bord); text-decoration: none; color: inherit; } .mini-cuve { width: 34px; height: 104px; flex: none; position: relative; overflow: hidden; border-radius: 8px; background: #EEF2F6; border: 1px solid var(--trait); display: block; } .mini-cuve .niveau { position: absolute; left: 0; right: 0; bottom: 0; display: block; } .mini-cuve.succes .niveau { background: linear-gradient(180deg, #12855ACC, #12855A); } .mini-cuve.alerte .niveau { background: linear-gradient(180deg, #B45309CC, #B45309); } .mini-cuve.danger .niveau { background: linear-gradient(180deg, #C2352FCC, #C2352F); } .mini-txt { display: flex; flex-direction: column; min-width: 0; } .mini-txt b { font-size: 13.5px; font-weight: 650; } .mini-produit { font-size: 12px; color: var(--encre-doux); margin-top: 1px; } .mini-pct { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-top: 9px; } .mini-vol { font-size: 11.5px; color: var(--muted); } .mini-badge { margin-top: 9px; align-self: flex-start; } /* ---- Timeline : date du jour à droite ---- */ .date-jour { font-size: 12px; white-space: nowrap; } /* ---- Champ numérique à pas (modale de vente) ---- */ .pas-a-pas { display: flex; align-items: center; height: 42px; border: 1px solid var(--neutre-bord); border-radius: var(--rayon-sm); overflow: hidden; background: #fff; } .pas-a-pas input { border: 0; height: 100%; text-align: center; font-size: 15px; } .pas-a-pas input:focus { box-shadow: none; } .pas-a-pas button { width: 42px; height: 100%; border: 0; background: #F8FAFC; color: var(--encre-doux); font-size: 19px; cursor: pointer; flex: none; } .pas-a-pas button:first-child { border-right: 1px solid var(--neutre-bord); } .pas-a-pas button:last-child { border-left: 1px solid var(--neutre-bord); } .pas-a-pas button:hover { background: #F1F5F9; } /* ---- Récapitulatif de la modale de vente ---- */ .recap-lignes { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; } .recap-lignes > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .recap-lignes span { font-size: 13px; color: var(--encre-doux); } .recap-lignes b { font-size: 13px; font-weight: 600; } .recap-total { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--trait-fort); } .recap-total > span { font-size: 12.5px; color: var(--encre-doux); } .recap-actions { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 9px; } /* ---- Ligne « aucun résultat » ---- */ .tableau tbody tr.ligne-vide:hover { background: transparent; } @media (max-width: 960px) { body.sidebar-reduite .sidebar { width: var(--sidebar-larg); flex-basis: var(--sidebar-larg); } body.sidebar-reduite .sidebar-marque-txt, body.sidebar-reduite .nav-libelle, body.sidebar-reduite .util-info, body.sidebar-reduite .sidebar-pied form { display: revert; } body.sidebar-reduite .nav-item { justify-content: flex-start; padding: 9px 11px; } body.sidebar-reduite .nav-section { height: auto; padding: 16px 10px 6px; margin: 0; background: none; color: var(--sidebar-section); } .mini-citernes { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } .graphe-zone { height: 210px; } } /* ============================================================ Contrôles « façon maquette » — la modale « Nouvelle vente » sert de RÉFÉRENCE de style pour les autres modales similaires (cohérence). ============================================================ */ /* Sélecteur avec icône de tête + chevron (citerne, client, …) */ .champ-ico { position: relative; display: flex; align-items: center; } .champ-ico > .ms { position: absolute; left: 12px; font-size: 19px; pointer-events: none; z-index: 1; color: var(--muted); } .champ-ico.ico-bleu > .ms { color: var(--bleu); } .champ-ico select { width: 100%; height: 42px; margin: 0; padding: 0 34px 0 38px; -webkit-appearance: none; appearance: none; cursor: pointer; border: 1px solid var(--neutre-bord); border-radius: var(--rayon-sm); background-color: #fff; color: var(--encre); font-size: 13.5px; font-weight: 600; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } .champ-ico select:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(30,111,181,.15); outline: none; } /* Ligne d'information sous un champ (disponibilité, coordonnées du tiers…) */ .champ-meta { font-size: 11.5px; color: var(--muted); margin-top: 5px; } .champ-meta .mono { font-family: "Geist Mono", monospace; } /* Champ « valeur + mention » (prix unitaire prérempli, modifiable) */ .champ-lecture { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--neutre-bord); border-radius: var(--rayon-sm); background: var(--carte-2); } .champ-lecture input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; font-family: "Geist Mono", monospace; font-size: 15px; font-weight: 600; } .champ-lecture input:focus { box-shadow: none; } .champ-lecture .mention { font-size: 11.5px; color: var(--muted); white-space: nowrap; } /* Pastille « bénéfice » dans le récapitulatif */ .recap-benefice { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 9px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; color: #12734F; background: #E8F5EE; border: 1px solid #CBE9DA; border-radius: 999px; } .recap-benefice .ms { font-size: 15px; } /* ============================================================ Modales génériques : champs alignés sur « Nouvelle vente » (hauteur 42 px, listes déroulantes à chevron, champs à icône). ============================================================ */ .grille-form select, .grille-form input:not([type=checkbox]):not([type=radio]) { height: 42px; } .grille-form input:not([type=checkbox]):not([type=radio]) { padding: 0 12px; } .grille-form select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } /* Variante « champ à icône de tête » pour les inputs (le select est déjà stylé plus haut). */ .champ-ico input { width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1px solid var(--neutre-bord); border-radius: var(--rayon-sm); background: #fff; color: var(--encre); font: inherit; } .champ-ico input:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(30,111,181,.15); outline: none; } /* ============================================================ Page Stations — refonte v2 (« cartes réseau ») Remplace, dans site.css, les blocs : • « Page Stations — grille de cartes » • « Page Stations — quantités de produits dans les cuves » • « Page Stations — gestion des cuves depuis la carte » Aucune autre page n'est impactée. ============================================================ */ /* KPIs sans filet de couleur en haut de carte (portée : pages qui ajoutent la classe « sans-filet » sur le conteneur .kpis). */ .kpis.sans-filet .kpi::before { display: none; } /* ---- Barre d'outils de la page (recherche + filtres + bascule de vue) ---- */ .stations-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; box-shadow: var(--ombre); } .stations-outils .recherche { flex: 1; min-width: 220px; max-width: 340px; } .stations-outils .fin { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* La règle globale « select { width:100% } » ferait déborder la barre : on la neutralise ici. */ .stations-outils select.filtre { width: auto; flex: none; min-width: 168px; } .stations-outils .btn { flex: none; } .stations-outils .compte { font-size: 12.5px; color: var(--muted); } .vue-bascule { display: flex; gap: 2px; padding: 2px; background: #F1F4F8; border: 1px solid var(--neutre-bord); border-radius: 9px; } .vue-bascule > * { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--encre-doux); text-decoration: none; cursor: pointer; } .vue-bascule > *:hover { text-decoration: none; color: var(--encre); } .vue-bascule .actif { background: #fff; color: var(--encre); box-shadow: 0 1px 2px rgba(16,26,36,.06); } .vue-bascule .ms { font-size: 17px; } /* ---- Grille de cartes ---- */ .stations-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 16px; align-items: start; } .station-carte { position: relative; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre); overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; } .station-carte:hover { box-shadow: var(--ombre-moy); } /* En-tête : icône + nom + adresse + badge de statut (plus de filet coloré) */ .station-carte-tete { display: flex; align-items: flex-start; gap: 13px; padding: 19px 20px 0; border-bottom: 0; } .station-carte-tete .ico { width: 42px; height: 42px; border-radius: 12px; flex: none; background: var(--bleu-clair); color: var(--bleu); display: flex; align-items: center; justify-content: center; } .station-carte-tete .ico .ms { font-size: 23px; } .station-carte-nom { font-size: 16px; font-weight: 650; letter-spacing: -.012em; } .station-carte-ville { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--encre-doux); margin-top: 2px; } .station-carte-ville .ms { font-size: 15px; color: var(--muted); flex: none; } /* Chiffre héros (CA du mois) + mini-stats à droite */ .station-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 16px 20px 17px; } .station-hero .lab { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .station-hero .ligne { display: flex; align-items: baseline; gap: 9px; margin-top: 3px; flex-wrap: wrap; } .station-hero .val { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; } .station-hero .devise { font-size: 12px; font-weight: 500; color: var(--muted); } .station-mini { display: flex; flex: none; text-align: right; } .station-mini > div { padding: 0 14px; border-right: 1px solid #EEF2F6; } .station-mini > div:last-child { padding-right: 0; border-right: 0; } .station-mini .lab { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .station-mini .val { font-size: 16px; font-weight: 600; margin-top: 2px; } /* ---- Bloc cuves & stock ---- */ .station-stocks { background: #FBFCFE; border-top: 1px solid #F1F5F9; padding: 15px 20px 16px; display: flex; flex-direction: column; gap: 13px; } .ss-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ss-titre { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .ss-ligne { display: flex; flex-direction: column; gap: 5px; } .ss-ligne.ss-cachee { display: none; } .station-stocks.ouvert .ss-ligne.ss-cachee { display: flex; } .ss-rang { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ss-etiquette { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .ss-pastille { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--neutre-plein); } .ss-nom { font-size: 13px; font-weight: 600; } .ss-prod { font-size: 12.5px; font-weight: 500; color: var(--muted); } .ss-qte { font-size: 13px; font-weight: 650; flex: none; } .ss-jauge { display: block; width: auto; height: 7px; margin: 0; border-radius: 999px; background: #EEF2F6; overflow: hidden; } .ss-jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--bleu); } .ss-bas { font-size: 11.5px; color: var(--muted); } .ss-bas .pct { font-weight: 600; color: var(--encre-doux); } .ss-actions { display: inline-flex; align-items: center; gap: 6px; } .ss-actions .form-enligne { display: inline-flex; } /* Icônes ✎ / 🗑 discrètes : bouton nu, sans bordure ni fond (cf. maquette). */ .ss-actions .lien-action { appearance: none; -webkit-appearance: none; background: none; border: 0; box-shadow: none; width: 24px; height: 24px; padding: 0; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #94A3B8; transition: background .12s, color .12s; } .ss-actions .lien-action .ms { font-size: 17px; } .ss-actions .lien-action:hover { background: #E9EEF4; color: var(--encre); } .ss-actions .lien-action.danger:hover { background: var(--danger-bg); color: var(--danger); } /* Couleur par produit (pastille + jauge) */ .ss-ligne.p-gasoil .ss-pastille, .ss-ligne.p-gasoil .ss-jauge > span { background: var(--bleu); } .ss-ligne.p-essence .ss-pastille, .ss-ligne.p-essence .ss-jauge > span { background: var(--or); } .ss-ligne.p-petrole .ss-pastille, .ss-ligne.p-petrole .ss-jauge > span { background: #0E7C86; } .ss-ligne.p-autre .ss-pastille, .ss-ligne.p-autre .ss-jauge > span { background: var(--neutre-plein); } /* Alerte de niveau bas */ .ss-alerte { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--alerte-bg); color: var(--alerte); border: 1px solid var(--alerte-bord); } .ss-alerte .ms { font-size: 13px; } /* Station sans cuve */ .ss-vide { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--trait-fort); border-radius: 11px; background: #fff; font-size: 12.5px; color: var(--encre-doux); } .ss-vide .ms { font-size: 20px; color: var(--muted); flex: none; } /* Bouton « voir les autres cuves » */ .ss-plus { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--bleu); font: inherit; font-size: 12.5px; font-weight: 600; } .ss-plus:hover { color: var(--bleu-fonce); } .ss-plus .ms { font-size: 17px; } /* ---- Pied de carte : remplissage du site + actions ---- */ .station-carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 20px; border-top: 1px solid #F1F5F9; background: var(--carte); } .station-rempl { min-width: 0; flex: 1; } .station-rempl .rang { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); } .station-rempl .rang b { font-weight: 600; color: var(--encre-doux); } .station-rempl .jauge { display: block; width: 100%; max-width: 230px; height: 5px; margin: 5px 0 0; } .station-carte-actions { display: flex; gap: 7px; flex: none; } @media (max-width: 1000px) { .stations-grille { grid-template-columns: 1fr; } .station-hero { flex-direction: column; align-items: flex-start; gap: 14px; } .station-mini { text-align: left; } .station-mini > div:first-child { padding-left: 0; } } /* ============================================================ Barre d'outils « pills » + sélection de lignes + export (liste) ============================================================ */ .filtre-pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid var(--neutre-bord); background: var(--carte); border-radius: 10px; box-shadow: var(--ombre); cursor: pointer; } .filtre-pill:hover { border-color: var(--gris); } .filtre-pill .flabel { color: var(--muted); font-size: 13.5px; } .filtre-pill select { border: 0; background: transparent; box-shadow: none; height: auto; width: auto; margin: 0; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--encre); -webkit-appearance: none; appearance: none; cursor: pointer; } .filtre-pill select:focus { box-shadow: none; outline: none; } .filtre-pill .chev { font-size: 18px; color: #CBD5E1; } /* Colonne de cases à cocher */ .tableau .col-chk { width: 42px; padding-left: 18px; padding-right: 0; text-align: left; } .tableau input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--bleu); cursor: pointer; margin: 0; vertical-align: middle; } /* ============================================================ Correctif : le champ de recherche ne doit pas avoir de bordure interne (la bordure est portée par le conteneur .recherche / .recherche-globale). Cette règle passe APRÈS la règle globale des champs et l'emporte donc. ============================================================ */ .recherche input, .recherche-globale input { border: 0; background: transparent; box-shadow: none; height: auto; padding: 0; } .recherche input:focus, .recherche-globale input:focus { border: 0; box-shadow: none; outline: none; } /* ============================================================ Bandeau « workflow » — page Approvisionnements ============================================================ */ .wf-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre); padding: 18px 20px; margin-bottom: 18px; } .wf-titre { margin: 0 0 16px; font-size: 15.5px; font-weight: 650; letter-spacing: -.012em; } .wf-etapes { display: flex; align-items: flex-start; } .wf-etape { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .wf-trait { position: absolute; top: 22px; left: -50%; width: 100%; height: 3px; background: #E6EBF1; z-index: 0; } .wf-etape:first-child .wf-trait { display: none; } .wf-rond { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; background: #F1F5F9; color: #94A3B8; } .wf-rond .ms { font-size: 19px; } .wf-label { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .wf-date { font-size: 11.5px; color: #94A3B8; margin-top: 2px; } .wf-fait .wf-rond { background: #E7F3EC; color: #12855A; } .wf-fait .wf-label { color: var(--encre); } .wf-fait .wf-trait { background: #B7DCC6; } .wf-courant .wf-rond { background: var(--bleu); color: #fff; } .wf-courant .wf-label { color: var(--bleu); font-weight: 700; } .wf-courant .wf-trait { background: #B7DCC6; } .wf-rejete .wf-rond { background: #FCEBEA; color: #C2352F; } .wf-rejete .wf-label { color: #C2352F; font-weight: 700; } .wf-rejete .wf-trait { background: #B7DCC6; } .wf-avenir .wf-rond { background: #F1F5F9; color: #94A3B8; } .wf-avenir .wf-trait { background: #E6EBF1; } @media (max-width: 640px) { .wf-label { font-size: 11px; } .wf-rond { width: 38px; height: 38px; } .wf-trait { top: 19px; } } /* Cartes KPI : retrait du filet de couleur en haut (demande client). */ .kpi.accent-bleu::before, .kpi.accent-or::before, .kpi.accent-succes::before, .kpi.accent-alerte::before, .kpi.accent-danger::before { display: none; content: none; } /* ============================================================ Pages compte : Mon profil · Préférences · Aide ============================================================ */ .profil-entete { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; } .avatar.avatar-lg { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; } .profil-nom { font-size: 16px; font-weight: 650; letter-spacing: -.01em; } .profil-role { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 3px; } .profil-role .ms { font-size: 16px; } /* Champ mot de passe avec bouton « œil » */ .champ-mdp { position: relative; display: flex; align-items: center; } .champ-mdp input { width: 100%; padding-right: 42px; } .champ-mdp .oeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; } .champ-mdp .oeil:hover { background: var(--carte-2); color: var(--encre); } /* Message inline (succès / erreur) */ .alerte-inline { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; } .alerte-inline .ms { font-size: 18px; } .alerte-inline.ok { background: var(--succes-bg); color: var(--succes); border: 1px solid #CBE9DA; } .alerte-inline.erreur { background: var(--danger-bg); color: var(--danger); border: 1px solid #F3D0CE; } /* Préférences */ .pref-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #F1F5F9; } .pref-ligne:first-of-type { border-top: 0; } .pref-titre { font-size: 14px; font-weight: 600; } .pref-sous { font-size: 12.5px; color: var(--muted); margin-top: 2px; } label.pref-ligne { cursor: pointer; } kbd { font-family: "Geist Mono", monospace; font-size: 11.5px; background: var(--carte-2); border: 1px solid var(--neutre-bord); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; } /* Aide */ .aide-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.5; } .aide-liste li::marker { color: var(--bleu); font-weight: 700; } .faq details { border-top: 1px solid #F1F5F9; padding: 10px 0; } .faq details:first-child { border-top: 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; display: flex; align-items: center; gap: 8px; } .faq summary::before { content: "add"; font-family: "Material Symbols Outlined"; font-size: 18px; color: var(--muted); } .faq details[open] summary::before { content: "remove"; } .faq summary::-webkit-details-marker { display: none; } .faq p { margin: 8px 0 0 26px; font-size: 13px; color: var(--encre-doux); line-height: 1.5; } /* ============================================================ Recherche globale (page /recherche) ============================================================ */ .recherche-page { max-width: 640px; height: 46px; margin-bottom: 18px; gap: 8px; } .recherche-page .btn { flex: none; } .res-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; } .res-groupe .carte-tete { display: flex; align-items: center; justify-content: space-between; } .res-groupe .carte-titre { display: flex; align-items: center; gap: 8px; } .res-groupe .carte-titre .ms { font-size: 19px; color: var(--muted); } .res-voir { font-size: 12.5px; color: var(--bleu); font-weight: 600; text-decoration: none; } .res-voir:hover { text-decoration: underline; } .res-liste { display: flex; flex-direction: column; margin-top: 4px; } .res-item { display: flex; align-items: center; gap: 11px; padding: 10px 8px; border-radius: 10px; text-decoration: none; color: inherit; border-top: 1px solid #F1F5F9; } .res-item:first-child { border-top: 0; } .res-item:hover { background: var(--carte-2); } .res-ico { width: 34px; height: 34px; border-radius: 9px; background: #EAF2FA; color: var(--bleu); display: flex; align-items: center; justify-content: center; flex: none; } .res-ico .ms { font-size: 18px; } .res-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .res-nom { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .res-sous { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .res-chev { color: #CBD5E1; font-size: 20px; flex: none; } /* Bandeau workflow — en-tête + résumé (adapté au cycle appro à 3 états) */ .wf-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .wf-surtitre { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .wf-titre { margin: 2px 0 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; font-family: "Geist Mono", monospace; } .wf-resume { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 0 0 16px; margin-bottom: 6px; border-bottom: 1px solid #F1F5F9; } .wf-resume > div { display: flex; flex-direction: column; gap: 2px; } .wf-k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .wf-v { font-size: 13.5px; font-weight: 600; } .wf-v.mono { font-family: "Geist Mono", monospace; } /* ============================================================ Pages compte (Profil · Préférences · Aide) — refonte UI ============================================================ */ .avatar.avatar-xl { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; } .carte-titre { display: flex; align-items: center; gap: 8px; } .carte-titre .ms { font-size: 19px; color: var(--muted); } .grille-2col-profil { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } /* En-tête profil */ .profil-hero { display: flex; align-items: center; gap: 18px; padding: 22px; margin-bottom: 16px; } .profil-hero-nom { font-size: 20px; font-weight: 680; letter-spacing: -.02em; } .profil-hero-role { margin-top: 6px; } .profil-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .profil-hero-meta > span { display: inline-flex; align-items: center; gap: 6px; } .profil-hero-meta .ms { font-size: 16px; } /* Interrupteur */ .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: #CBD5E1; border-radius: 999px; transition: .18s; } .switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; box-shadow: 0 1px 2px rgba(15,27,38,.25); } .switch input:checked + .slider { background: var(--bleu); } .switch input:checked + .slider::before { transform: translateX(18px); } /* Préférences */ .pref-cote { display: flex; flex-direction: column; gap: 16px; } .pref-txt { min-width: 0; } /* Prise en main : étapes numérotées */ .pas-liste { display: flex; flex-direction: column; gap: 14px; } .pas { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; } .pas-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #EAF2FA; color: var(--bleu); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .pas em, .faq em { font-style: normal; font-weight: 600; color: var(--encre); } .ms-inline { font-size: 17px; vertical-align: -3px; color: var(--muted); } /* Carte contact WA DC */ .aide-contact { display: flex; gap: 18px; align-items: flex-start; padding: 22px; background: linear-gradient(180deg, #F3F8FD, var(--carte)); border-color: #DCEAF6; } .aide-contact-ico { flex: none; width: 48px; height: 48px; border-radius: 13px; background: var(--bleu); color: #fff; display: flex; align-items: center; justify-content: center; } .aide-contact-ico .ms { font-size: 26px; } .aide-contact-titre { margin: 0 0 4px; font-size: 16px; font-weight: 650; } .aide-contact-txt p { font-size: 13.5px; color: var(--encre-doux); line-height: 1.55; margin: 0; } .aide-contact-liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } @media (max-width: 860px) { .grille-2col-profil { grid-template-columns: 1fr; } .aide-contact { flex-direction: column; } } .station-fixe { cursor: default; } /* Groupe de cases à cocher (multi-sélection dans une modale, ex. stations d'un compte) */ .cases-groupe { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .case-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--neutre-bord); border-radius: 10px; font-size: 13.5px; cursor: pointer; background: var(--carte); } .case-item:hover { border-color: var(--gris); } .case-item input { flex: none; } .case-item:has(input:checked) { border-color: var(--bleu); background: #F3F8FD; } /* Lignes de document : grille pilotable (masquage du prix unitaire pour les bons) */ .doc-ligne { display: grid; grid-template-columns: 1fr 90px 120px 34px; gap: 8px; align-items: center; } #dLignes.sans-prix .doc-ligne { grid-template-columns: 1fr 90px 34px; } #dLignes.sans-prix .l-p { display: none; } .wf-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #F1F5F9; } /* Pop-up de confirmation : variante neutre (action non destructive, ex. réceptionner) */ .modale-ico-neutre { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #EAF2FA; color: var(--bleu); } .modale-ico-neutre .ms { font-size: 24px; } /* Page Stations — vue « Liste » (second mode d'affichage de la même page) */ .stations-table td { vertical-align: middle; } .stations-table .col-actions { width: 88px; } .st-rempl { display: flex; flex-direction: column; gap: 4px; min-width: 150px; } .st-rempl .jauge { height: 6px; } .st-rempl .mono { font-size: 11.5px; color: var(--muted); } /* Entêtes de tableau triables : affordance discrète, alignée sur le reste de l'interface */ .tableau thead th.triable { cursor: pointer; user-select: none; } .tableau thead th.triable a { gap: 5px; } .tableau thead th.txt-droite.triable a { flex-direction: row-reverse; } .tableau thead th .tri-ico { font-size: 15px; opacity: 0; transition: opacity .12s, color .12s; } .tableau thead th.triable:hover .tri-ico { opacity: .75; } .tableau thead th.tri-actif { color: var(--bleu); } .tableau thead th.tri-actif .tri-ico { opacity: 1; color: var(--bleu); } /* Encadré d'information dans un formulaire (ex. : comment se remplit une cuve) */ .aide-encadre { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; background: #F3F8FD; border: 1px solid #DCEAF6; border-radius: var(--rayon-sm); font-size: 12.5px; line-height: 1.5; color: var(--encre-doux); } .aide-encadre .ms { font-size: 18px; color: var(--bleu); flex: none; } /* KPI cliquable : le sous-titre devient un lien discret vers la page détaillée */ .kpi-lien { color: var(--bleu); text-decoration: none; } .kpi-lien:hover { text-decoration: underline; } /* Filtre de période dans la barre d'outils des listes */ .filtre-pill.filtre-periode input[type=date] { width: auto; height: auto; border: 0; padding: 0; background: none; font-size: 13px; } .filtre-pill.filtre-periode input[type=date]:focus { box-shadow: none; } /* Intertitres d'un formulaire long (fenêtre de paramétrage des documents) */ .modale-section { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); } .modale-section-suite { margin-top: 20px; padding-top: 16px; border-top: 1px solid #EEF2F6; } /* Fenêtre d'aperçu d'un PDF : le lecteur natif occupe toute la hauteur disponible */ .modale-apercu { max-width: 900px; } .apercu-corps { padding: 0; display: flex; flex-direction: column; } .apercu-cadre { width: 100%; height: min(72vh, 900px); border: 0; display: block; background: #F4F8FC; } .apercu-repli { padding: 26px 22px; font-size: 13px; text-align: center; } /* ============================================================ DOCUMENTS — liste groupée par dossier commercial ------------------------------------------------------------ À COLLER À LA FIN de wwwroot/css/site.css. Tout est préfixé « .doc- » : aucune règle existante n'est modifiée, aucune autre page n'est affectée. Les couleurs proviennent des variables déjà définies dans :root. ============================================================ */ /* Grille partagée par la ligne d'entêtes et par chaque ligne de pièce : une seule source de vérité pour l'alignement des colonnes. */ .doc-dossiers { --doc-cols: 196px 88px 162px minmax(0, 1fr) 150px 122px 104px; display: flex; flex-direction: column; gap: 12px; } /* ---- Bascule Dossiers / Toutes les pièces ---- */ .doc-barre-vue { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 0 4px; } .doc-barre-vue .doc-compte { font-size: 12.5px; color: var(--muted); } .doc-bascule { margin-left: auto; display: flex; gap: 2px; padding: 2px; background: var(--neutre-bg); border: 1px solid var(--neutre-bord); border-radius: 9px; } .doc-bascule a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--encre-doux); text-decoration: none; } .doc-bascule a:hover { color: var(--encre); text-decoration: none; } .doc-bascule a.est-actif { background: var(--carte); color: var(--encre); box-shadow: 0 1px 2px rgba(16, 26, 36, .06); } .doc-bascule .ms { font-size: 17px; } /* ---- Ligne d'entêtes (hors des cartes, comme un vrai tableau) ---- */ .doc-entetes { display: grid; grid-template-columns: var(--doc-cols); padding: 0 16px 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .doc-entetes .doc-h-montant { text-align: right; } .doc-entetes .doc-h-statut { padding-left: 14px; } .doc-entetes .doc-h-actions { text-align: right; } /* ---- Le dossier : un
pour le pli/dépli, sans JavaScript ---- */ .doc-dossier { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); /* Pas d'« overflow: hidden » ici : il rognait le menu « … » des lignes de pièces. Les coins sont arrondis par les éléments de bord (résumé et dernière ligne). */ } .doc-dossier > summary { border-radius: calc(var(--rayon) - 1px) calc(var(--rayon) - 1px) 0 0; } .doc-dossier .doc-piece:last-child { border-radius: 0 0 calc(var(--rayon) - 1px) calc(var(--rayon) - 1px); } .doc-dossier > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--carte-2); border-bottom: 1px solid transparent; } .doc-dossier > summary::-webkit-details-marker { display: none; } .doc-dossier > summary:hover { background: #F8FAFC; } .doc-dossier[open] > summary { border-bottom-color: var(--trait); } .doc-dossier > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(30, 111, 181, .35); } /* Chevron : pivote à l'ouverture */ .doc-chev { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--neutre-bord); border-radius: var(--rayon-xs); background: var(--carte); color: var(--encre-doux); transition: transform .15s ease, border-color .15s ease, color .15s ease; } .doc-chev .ms { font-size: 18px; } .doc-dossier[open] .doc-chev { transform: rotate(90deg); } .doc-dossier > summary:hover .doc-chev { border-color: var(--bleu); color: var(--bleu); } /* Pastille d'état du dossier */ .doc-jeton { width: 32px; height: 32px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info); } .doc-jeton .ms { font-size: 19px; } .doc-dossier.est-complet .doc-jeton { background: var(--succes-bg); color: var(--succes); } .doc-dossier.est-incomplet .doc-jeton { background: var(--or-bg); color: var(--or-txt); } .doc-identite { min-width: 0; } .doc-identite-haut { display: flex; align-items: center; gap: 9px; } .doc-num { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; } .doc-compteur { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .03em; background: var(--neutre-bg); color: var(--neutre); border: 1px solid var(--neutre-bord); } .doc-tiers { font-size: 12.5px; color: var(--encre-doux); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Chaîne documentaire ---- */ .doc-chaine { margin-left: auto; display: flex; align-items: center; gap: 5px; flex: none; } .doc-etape { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--info-bg); color: var(--info); border: 1px solid var(--info-bord); } .doc-etape .ms { font-size: 14px; } .doc-etape.est-possible { background: var(--or-bg); color: var(--or-txt); border-color: var(--or-bord); } .doc-etape.est-manquante { background: var(--carte); color: var(--muted); border: 1px dashed var(--neutre-bord); } .doc-montant-dossier { text-align: right; flex: none; padding-left: 18px; } .doc-montant-dossier b { display: block; font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .doc-montant-dossier span { font-size: 11.5px; color: var(--muted); } /* ---- Les pièces du dossier ---- */ .doc-piece { display: grid; grid-template-columns: var(--doc-cols); align-items: center; padding: 0 16px; min-height: 52px; border-top: 1px solid var(--neutre-bg); } .doc-piece:hover { background: #F8FAFC; } .doc-piece.est-pivot { background: var(--carte-2); } .doc-piece.est-pivot:hover { background: #F8FAFC; } .doc-piece-num { display: flex; align-items: center; gap: 9px; min-width: 0; } .doc-branche { width: 14px; flex: none; color: #CBD5E1; font-size: 13px; line-height: 1; } .doc-piece-num strong { display: block; font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; } .doc-filiation { display: block; font-size: 11px; color: var(--muted); } .doc-date { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--encre-doux); } .doc-type { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre-doux); } .doc-type .ms { font-size: 17px; color: var(--muted); } .doc-piece-tiers { font-size: 13px; color: var(--encre-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-piece-montant { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13.5px; text-align: right; } .doc-piece-montant.est-vide { color: #CBD5E1; } .doc-piece-statut { padding-left: 14px; } /* ---- Actions : deux visibles, le reste dans un menu ---- */ .doc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .doc-actions .lien-action { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--neutre-bord); border-radius: var(--rayon-xs); background: var(--carte); color: var(--encre-doux); cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .doc-actions .lien-action:hover { border-color: var(--bleu); color: var(--bleu); background: #F5FAFF; } .doc-actions .lien-action.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); } .doc-actions .form-enligne { display: inline-flex; } .doc-plus { position: relative; display: inline-flex; } .doc-plus.est-ouvert > .lien-action { border-color: var(--bleu); color: var(--info); background: var(--info-bg); } .doc-menu { position: absolute; top: 34px; right: 0; z-index: 30; width: 236px; padding: 6px; background: var(--carte); border: 1px solid var(--bleu-bord); border-radius: 12px; box-shadow: 0 18px 44px rgba(15, 27, 38, .18); display: flex; flex-direction: column; gap: 1px; } .doc-menu[hidden] { display: none; } /* Le menu s'ouvre vers le haut sur les dernières lignes de la page. */ .doc-menu.vers-haut { top: auto; bottom: 34px; } .doc-menu button, .doc-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--rayon-xs); background: transparent; color: var(--encre); font-size: 13px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; } .doc-menu button:hover, .doc-menu a:hover { background: var(--fond); color: var(--encre); text-decoration: none; } .doc-menu .ms { font-size: 18px; opacity: .85; } .doc-menu .form-enligne { display: block; } .doc-menu .doc-menu-danger { color: var(--danger); margin-top: 3px; border-top: 1px solid var(--trait); border-radius: 0 0 var(--rayon-xs) var(--rayon-xs); } .doc-menu .doc-menu-danger:hover { background: var(--danger-bg); color: var(--danger); } /* ---- Bandeau de suggestion ---- */ .doc-suggestion { display: flex; align-items: center; gap: 10px; padding: 11px 16px 12px 55px; border-top: 1px dashed var(--neutre-bord); background: var(--carte-2); } .doc-suggestion > .ms { font-size: 18px; color: var(--or); flex: none; } .doc-suggestion p { margin: 0; font-size: 12.5px; color: var(--encre-doux); text-wrap: pretty; } .doc-suggestion .doc-suggestion-btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--or-bord); border-radius: var(--rayon-xs); background: var(--or-bg); color: var(--or-txt); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; } .doc-suggestion .doc-suggestion-btn:hover { background: #F7E9CC; color: var(--or-txt); text-decoration: none; } .doc-suggestion .doc-suggestion-btn .ms { font-size: 16px; } /* ---- État vide ---- */ .doc-vide { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 46px 24px; text-align: center; color: var(--encre-doux); } .doc-vide .ms { font-size: 34px; color: #CBD5E1; display: block; margin-bottom: 8px; } .doc-vide b { display: block; font-size: 15px; color: var(--encre); margin-bottom: 4px; } /* ---- Pied de liste ---- */ .doc-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 0 4px; font-size: 12.5px; color: var(--muted); } /* ============================================================ Écrans étroits : la grille tombe en fiches empilées. ============================================================ */ @media (max-width: 1180px) { .doc-dossiers { --doc-cols: 176px 82px 140px minmax(0, 1fr) 130px 112px 104px; } .doc-chaine { display: none; } } @media (max-width: 900px) { .doc-entetes { display: none; } .doc-dossier > summary { flex-wrap: wrap; } .doc-montant-dossier { padding-left: 0; margin-left: auto; } .doc-piece { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; align-items: start; } .doc-piece-num { grid-column: 1; } .doc-actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; } .doc-date, .doc-type, .doc-piece-tiers, .doc-piece-montant, .doc-piece-statut { grid-column: 1; text-align: left; padding-left: 23px; } .doc-suggestion { padding-left: 14px; flex-wrap: wrap; } .doc-suggestion .doc-suggestion-btn { margin-left: 0; } } /* Bascule de modes d'affichage d'une liste (rendue par _EcranListe, sous la barre d'outils) */ .liste-barre-vue { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 0 4px; } .liste-compte { font-size: 12.5px; color: var(--muted); } .liste-bascule { margin-left: auto; display: flex; gap: 2px; padding: 2px; background: var(--neutre-bg); border: 1px solid var(--neutre-bord); border-radius: 9px; } .liste-bascule a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--encre-doux); text-decoration: none; } .liste-bascule a .ms { font-size: 17px; } .liste-bascule a:hover { color: var(--encre); } .liste-bascule a.est-actif { background: #fff; color: var(--bleu); box-shadow: var(--ombre-douce); } /* Outils du champ mot de passe (afficher / générer / copier) */ .mdp-outils { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; } .mdp-outils .btn { padding: 5px 10px; font-size: 12px; } .mdp-outils .btn .ms { font-size: 15px; }