/* ========================================================================== DSN Transports — Design System Feuille de style partagée : variables de marque + police. Importée par portail.html, feuille_heure_v4.html, controle_vehicules.html et app/dashboard-heures.html. Ne définit aucune classe utilisée par le JS existant de ces pages — uniquement des tokens (variables) et la police. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); :root{ /* Couleurs de marque */ --dsn-navy: #0F2C4C; --dsn-navy-deep: #0A2E4D; --dsn-blue: #3E8FC7; --dsn-sky: #4A9FD8; /* Bleu d'ACTION — version assombrie du bleu de marque. --dsn-blue (#3E8FC7) est trop clair pour porter du texte blanc : 3,52:1, il ÉCHOUE WCAG AA. Règle : --dsn-blue pour le décoratif (bordures, anneaux de focus, filets), --dsn-blue-deep dès qu'un texte ou une icône blanche est posé dessus. */ --dsn-blue-deep: #2A6C9E; --dsn-bg: #F4F6F8; --dsn-white: #FFFFFF; --dsn-slate: #5A6B7A; --dsn-hairline: #E4E9EE; --dsn-hairline-strong: #CDD7E0; /* Couleurs de statut historiques — conservées : utilisées par feuille_heure_v4 et dashboard-heures. Ne pas utiliser en décoratif. */ --dsn-amber: #D68A3C; --dsn-amber-ink: #8A5015; --dsn-red: #C0473B; /* ── Échelle sémantique de statut ─────────────────────────────────────── SOURCE UNIQUE pour tous les badges/indicateurs de l'app (badges, chips, pastilles, bannières). Ne jamais redéfinir une couleur de statut en dur dans une page : réutiliser ces tokens. ok vert → OK, validé, oui, conforme, aucune anomalie warn ambre → en attente, alerte modérée crit rouge → non conforme, critique, anomalies, retard neutral gris → UNIQUEMENT indéterminé / non applicable ("?") info bleu → états normaux et étiquettes non-statut : en cours, mois, zone, type de fiche. Ne signale AUCUN problème. Chaque niveau fournit une encre (texte + pastille), un fond clair et une bordure. Teintes désaturées vers le navy de marque pour s'intégrer à la charte plutôt que de jurer avec. Contrastes vérifiés AA sur le fond correspondant, en Manrope 700 / 11px (tableaux denses). */ --dsn-ok: #0F7B4F; --dsn-ok-bg: #E2F3EA; --dsn-ok-bd: #B4E0CA; --dsn-warn: #9A5B08; --dsn-warn-bg: #FCEFD9; --dsn-warn-bd: #EFD0A1; --dsn-crit: #B3261E; --dsn-crit-bg: #FBE6E4; --dsn-crit-bd: #F0BDB8; --dsn-neutral: #5A6B7A; --dsn-neutral-bg: #EDF1F5; --dsn-neutral-bd: #D5DEE6; /* Info — dérivé du bleu de marque, pour les états purement informatifs */ --dsn-info: #1B5E96; --dsn-info-bg: #E3EFF9; --dsn-info-bd: #BBD8EE; /* Rayons */ --dsn-r-sm: 8px; --dsn-r-md: 12px; --dsn-r-lg: 16px; --dsn-r-xl: 22px; --dsn-shadow-card: 0 1px 2px rgba(15,44,76,.05); --dsn-touch-min: 44px; /* ── Quadrillage des tableaux ─────────────────────────────────────────── L'app est en thème CLAIR (--dsn-bg #F4F6F8, cartes blanches) : des traits rgba(255,255,255,…) y seraient invisibles. Mêmes alphas, encre navy de la charte. Un éventuel thème sombre se fait en remplaçant ces cinq valeurs — aucune règle ci-dessous n'a de couleur en dur. */ --dsn-grid-line: rgba(15,44,76,.14); --dsn-grid-head: rgba(15,44,76,.05); --dsn-grid-head-bd: rgba(15,44,76,.22); --dsn-grid-zebra: rgba(15,44,76,.03); --dsn-grid-hover: rgba(15,44,76,.06); --dsn-font: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── Échelle typographique — labels, chiffres, titres ─────────────────── Nommage par usage plutôt que par taille brute : un futur ajustement de valeur ne demande pas de reparcourir les pages pour renommer. */ --dsn-fs-label: 11px; /* libellés majuscules, en-têtes de tableau */ --dsn-fs-sm: 12px; /* texte secondaire, sous-titres */ --dsn-fs-base: 13px; /* corps de texte par défaut de l'app */ --dsn-fs-md: 14px; /* corps mis en avant, boutons */ --dsn-fs-lg: 16px; /* titres de carte */ --dsn-fs-xl: 20px; /* titres de section */ --dsn-fs-2xl: 26px; /* titre de page */ --dsn-fs-3xl: 34px; /* valeur chiffrée mise en avant (KPI) */ /* ── Grille d'espacement 4px ──────────────────────────────────────────── */ --dsn-sp-1: 4px; --dsn-sp-2: 8px; --dsn-sp-3: 12px; --dsn-sp-4: 16px; --dsn-sp-5: 20px; --dsn-sp-6: 24px; --dsn-sp-8: 32px; /* ── Élévation — bordure fine d'abord, ombre en appoint léger ──────────── Remplace les ombres larges façon « glow » par un rendu Linear/Vercel : au repos presque plate, un léger décollement seulement au survol. */ --dsn-shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03); --dsn-shadow-2: 0 6px 16px -4px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.05); /* ── Vocabulaire sémantique — alias vers les tokens vérifiés ci-dessus. Ajoutés pour nommer explicitement bg/surface/texte/accent/statuts sans dupliquer une valeur : toute modification se fait à la source unique. */ --bg: var(--dsn-bg); --surface: var(--dsn-white); --border: var(--dsn-hairline-strong); --text-primary: #1B2B3A; --text-secondary: var(--dsn-slate); --accent: var(--dsn-blue-deep); --success: var(--dsn-ok); --warning: var(--dsn-warn); --danger: var(--dsn-crit); /* ── Thème sombre — tokens PRÉPARÉS, non activés ───────────────────────── Aucune page ne bascule automatiquement : 16 pages chargent cette feuille sans avoir été vérifiées en sombre (contrastes de tableaux denses, badges, PDF en aperçu…). Activer reviendrait à poser `:root[data-theme="dark"]` sur et vérifier page par page — non fait ici, hors du périmètre dashboard demandé. */ --dsn-dark-bg: #0B1420; --dsn-dark-surface: #121D2C; --dsn-dark-hairline: #223349; --dsn-dark-text-primary: #E8EDF3; --dsn-dark-text-secondary: #93A3B8; } /* ========================================================================== Quadrillage global des tableaux de données -------------------------------------------------------------------------- Ce fichier est le SEUL importé par les 11 pages de /app — c'est donc le seul endroit d'où un style de tableau atteint tout le dashboard (css/dsn-app.css n'est chargé que par 7 d'entre elles). Exception au principe « tokens uniquement » énoncé en tête de fichier, assumée et limitée aux sélecteurs d'éléments : aucune classe utilisée par le JS n'est introduite. Spécificité : les pages et dsn-app.css sont chargés APRÈS et redéfinissent « table / th / td » au niveau élément (0,0,1). Le préfixe `html body` + le `:not(…)` portent ces règles à 0,1,x pour que le quadrillage passe devant, sans recourir à !important. Exclusions — tableaux de MISE EN PAGE, à ne pas quadriller : .suivi-grid grille calendrier de pastilles (app/tournees.html) : border-collapse:separate, cellules à padding 0, colonnes sticky — un bord de 1px et 10px de padding la détruiraient. .dtable liste clé/valeur des modales (css/dsn-app.css). .no-grid échappatoire pour un cas futur, sans toucher au JS. ========================================================================== */ html body table:not(.suivi-grid, .dtable, .no-grid){ border-collapse: collapse; width: 100%; } html body table:not(.suivi-grid, .dtable, .no-grid) :is(th, td){ border: 1px solid var(--dsn-grid-line); } html body table:not(.suivi-grid, .dtable, .no-grid) thead tr{ background: var(--dsn-grid-head); border-bottom: 2px solid var(--dsn-grid-head-bd); } html body table:not(.suivi-grid, .dtable, .no-grid) tbody tr:nth-child(even){ background: var(--dsn-grid-zebra); } /* Espacement des cellules laissé en spécificité élément (0,0,1) À DESSEIN : sert de valeur par défaut aux tableaux qui n'en définissent aucune, et laisse gagner les densités déjà réglées par page (.tbl 9/12, table.recap 7/10, .acc-tbl 7/12, dsn-app 13/16). Harmoniser de force ferait grossir les tableaux denses sans rapport avec la lisibilité demandée. */ th, td{ padding: 10px 12px; } /* Survol : même raison — chaque page a déjà son survol de marque (bleu clair) et planning.html le neutralise volontairement sur les lignes de détail d'accordéon. Cette règle ne sert donc que de repli là où rien n'est défini. */ tbody tr:hover{ background: var(--dsn-grid-hover); } /* Mobile — app/dashboard-heures.html : sous 640px, .tbl passe en cartes empilées (td en display:block). border-collapse ne s'applique plus : des bords latéraux y dessineraient une boîte par ligne et les traits entre cellules se doubleraient. On ne garde que le séparateur horizontal. Spécificité alignée sur la règle ci-dessus (0,1,4) + placée après → gagne. Les autres tableaux gardent leur quadrillage et défilent horizontalement dans leur conteneur overflow-x, bords compris. */ @media (max-width: 640px){ html body table.tbl:not(.suivi-grid, .dtable, .no-grid) :is(th, td){ border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid var(--dsn-grid-line); } }