/* =========================================================== Devis & Factures — feuille de style Palette alignee sur le logo Supervision : bleu #4d73b6, bleu nuit #243662. Mode clair (par defaut) + mode sombre bleu nuit via [data-theme="dark"] sur . =========================================================== */ :root { color-scheme: light; --bleu: #4d73b6; --bleu-fonce: #243662; --bleu-survol: #243662; --bleu-clair: #e8edf8; --surface: #ffffff; --page: #f5f7fb; --encre: #172136; --encre-secondaire: #515b77; --encre-muet: #8891a8; --bordure: #e3e7f0; --bordure-forte: #ccd3e3; --bon: #0ca30c; --bon-fond: #e2f6e2; --bon-bordure: #bfe8bf; --bon-texte: #0a6e0a; --avertissement: #b9790a; --avertissement-fond: #fef3d9; --serieux: #c1502a; --serieux-fond: #fbe6dd; --critique: #d03b3b; --critique-fond: #fbe2e2; --critique-survol: #f6cccc; --critique-bordure: #f2b9b9; --neutre-fond: #eef0f4; --rayon: 10px; --rayon-lg: 14px; --ombre: 0 1px 2px rgba(23, 33, 54, 0.05), 0 4px 16px rgba(23, 33, 54, 0.06); } [data-theme="dark"] { color-scheme: dark; --bleu: #4d73b6; --bleu-fonce: #aecafd; --bleu-survol: #3f60a0; --bleu-clair: #1f2c4d; --surface: #182645; --page: #0e1830; --encre: #e8ecf7; --encre-secondaire: #b3bcd4; --encre-muet: #8089a6; --bordure: #283457; --bordure-forte: #37447a; --bon: #46d17b; --bon-fond: #123522; --bon-bordure: #1f5636; --bon-texte: #7be09a; --avertissement: #e7b355; --avertissement-fond: #3a2c10; --serieux: #e5906a; --serieux-fond: #3a2417; --critique: #ef7676; --critique-fond: #3a1a1a; --critique-survol: #4a2222; --critique-bordure: #5c2b2b; --neutre-fond: #23304f; --ombre: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.32); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--page); color: var(--encre); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; font-size: 15px; } html { transition: background-color 0.25s ease; } body, .carte, .stat-tuile, .barre-laterale, .bloc-client, .ligne-paiement, input, select, textarea, .btn, .badge, .bouton-theme { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } @media (prefers-reduced-motion: reduce) { html, body, .carte, .stat-tuile, .barre-laterale, .bloc-client, .ligne-paiement, input, select, textarea, .btn, .badge, .bouton-theme { transition: none; } } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 4px 0; font-weight: 650; letter-spacing: -0.01em; } p { margin: 0 0 8px 0; } .mise-en-page { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } /* ---------- Sidebar ---------- */ .barre-laterale { background: var(--surface); border-right: 1px solid var(--bordure); padding: 22px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; } .logo-app { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 6px 6px 24px 6px; } .logo-app .pastille { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 14px; flex-shrink: 0; } .logo-marque { width: auto; max-width: 172px; height: auto; display: block; } .logo-marque-sombre { display: none; } [data-theme="dark"] .logo-marque-claire { display: none; } [data-theme="dark"] .logo-marque-sombre { display: block; } .logo-app .titre { font-weight: 700; font-size: 15px; color: var(--encre); line-height: 1.2; } .logo-app .sous-titre, .sous-titre-app { font-size: 11.5px; color: var(--encre-muet); font-weight: 600; letter-spacing: 0.02em; } /* ---------- Bascule clair / sombre ---------- */ .bouton-theme { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--bordure-forte); background: var(--surface); color: var(--encre-secondaire); cursor: pointer; padding: 0; flex-shrink: 0; } .bouton-theme:hover { background: var(--page); color: var(--encre); } .bouton-theme svg { width: 17px; height: 17px; } .bouton-theme .icone-soleil { display: none; } [data-theme="dark"] .bouton-theme .icone-lune { display: none; } [data-theme="dark"] .bouton-theme .icone-soleil { display: block; } .bouton-theme-auth { position: fixed; top: 18px; right: 18px; z-index: 5; } .nav-lien { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--encre-secondaire); font-size: 14px; font-weight: 500; } .nav-lien:hover { background: var(--page); color: var(--encre); } .nav-lien.actif { background: var(--bleu-clair); color: var(--bleu-fonce); } .nav-lien svg { flex-shrink: 0; width: 18px; height: 18px; } .nav-section-titre { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-muet); padding: 14px 12px 4px 12px; font-weight: 650; } .barre-laterale .bas { margin-top: auto; padding: 10px 12px; font-size: 12px; color: var(--encre-muet); border-top: 1px solid var(--bordure); padding-top: 14px; } /* ---------- Contenu principal ---------- */ .contenu { padding: 28px 36px 60px 36px; max-width: 1180px; } .en-tete-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .en-tete-page .fil-ariane { font-size: 12.5px; color: var(--encre-muet); margin-bottom: 6px; } .en-tete-page h1 { font-size: 23px; } .en-tete-page .actions { display: flex; gap: 10px; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s ease, border-color 0.12s ease; } .btn svg { width: 16px; height: 16px; } .btn-primaire { background: var(--bleu); color: #fff; } .btn-primaire:hover { background: var(--bleu-survol); } .btn-secondaire { background: var(--surface); color: var(--encre); border-color: var(--bordure-forte); } .btn-secondaire:hover { background: var(--page); } .btn-discret { background: transparent; color: var(--encre-secondaire); } .btn-discret:hover { background: var(--page); } .btn-danger { background: var(--critique-fond); color: var(--critique); } .btn-danger:hover { background: var(--critique-survol); } .btn-petit { padding: 6px 11px; font-size: 12.5px; border-radius: 7px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Cartes ---------- */ .carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-lg); box-shadow: var(--ombre); padding: 22px; margin-bottom: 20px; } .carte-titre { font-size: 15px; font-weight: 650; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; } /* ---------- Grille de stats (tableau de bord) ---------- */ .grille-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .stat-tuile { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-lg); padding: 18px 20px; box-shadow: var(--ombre); } .stat-tuile .libelle { font-size: 12.5px; color: var(--encre-muet); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; } .stat-tuile .valeur { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; } .stat-tuile .detail { font-size: 12.5px; color: var(--encre-muet); margin-top: 4px; } .stat-tuile.accent-bleu .valeur { color: var(--bleu-fonce); } .stat-tuile.accent-critique .valeur { color: var(--critique); } .stat-tuile.accent-avertissement .valeur { color: var(--avertissement); } .stat-tuile.accent-bon .valeur { color: var(--bon); } /* ---------- Graphique barres (SVG) ---------- */ .graphique-barres { width: 100%; overflow: visible; } .graphique-barres .barre { fill: var(--bleu); } .graphique-barres .barre:hover { fill: var(--bleu-fonce); } .graphique-barres .grille { stroke: var(--bordure); stroke-width: 1; } .graphique-barres .axe-libelle { fill: var(--encre-muet); font-size: 10.5px; font-family: system-ui, sans-serif; } .graphique-barres .valeur-libelle { fill: var(--encre-secondaire); font-size: 10px; font-family: system-ui, sans-serif; font-weight: 600; } .groupe-barre { cursor: default; } .groupe-barre .valeur-libelle { opacity: 0; transition: opacity 0.1s ease; } .groupe-barre:hover .valeur-libelle { opacity: 1; } .groupe-barre:hover .barre { fill: var(--bleu-fonce); } /* ---------- Tableaux ---------- */ table.tableau { width: 100%; border-collapse: collapse; font-size: 14px; } table.tableau th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--encre-muet); font-weight: 650; padding: 10px 14px; border-bottom: 1px solid var(--bordure); } table.tableau td { padding: 13px 14px; border-bottom: 1px solid var(--bordure); vertical-align: middle; } table.tableau tbody tr:hover { background: var(--page); } table.tableau td.num, table.tableau th.num { text-align: right; font-variant-numeric: tabular-nums; } table.tableau a.lien-ligne { display: block; } .tableau-vide { padding: 50px 20px; text-align: center; color: var(--encre-muet); } .tableau-vide .btn { margin-top: 14px; } /* ---------- Badges de statut ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-neutre { background: var(--neutre-fond); color: var(--encre-secondaire); } .badge-bleu { background: var(--bleu-clair); color: var(--bleu-fonce); } .badge-bon { background: var(--bon-fond); color: var(--bon); } .badge-avertissement { background: var(--avertissement-fond); color: var(--avertissement); } .badge-serieux { background: var(--serieux-fond); color: var(--serieux); } .badge-critique { background: var(--critique-fond); color: var(--critique); } /* ---------- Formulaires ---------- */ .grille-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grille-form.col-3 { grid-template-columns: repeat(3, 1fr); } .grille-form.col-4 { grid-template-columns: repeat(4, 1fr); } .champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .champ.pleine-largeur { grid-column: 1 / -1; } .champ label { font-size: 13px; font-weight: 600; color: var(--encre-secondaire); } .champ .aide { font-size: 12px; color: var(--encre-muet); } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password], input[type=url], select, textarea { font-family: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--bordure-forte); border-radius: 8px; background: var(--surface); color: var(--encre); width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-clair); } textarea { resize: vertical; min-height: 70px; } .case-cocher { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } .case-cocher input { width: 16px; height: 16px; } fieldset { border: none; padding: 0; margin: 0 0 20px 0; } legend { font-size: 14px; font-weight: 650; margin-bottom: 10px; padding: 0; } /* ---------- Table de lignes de devis/facture ---------- */ table.table-lignes { width: 100%; border-collapse: collapse; } table.table-lignes th { font-size: 11.5px; text-transform: uppercase; color: var(--encre-muet); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bordure); } table.table-lignes td { padding: 6px; vertical-align: top; } table.table-lignes input, table.table-lignes select { padding: 7px 9px; font-size: 13.5px; } table.table-lignes .col-designation { width: 34%; } table.table-lignes .col-qte { width: 8%; } table.table-lignes .col-prix { width: 13%; } table.table-lignes .col-tva { width: 9%; } table.table-lignes .col-remise { width: 9%; } table.table-lignes .col-total { width: 13%; text-align: right; font-variant-numeric: tabular-nums; padding-top: 12px; font-weight: 600; } table.table-lignes .col-suppr { width: 5%; text-align: center; } .btn-suppr-ligne { background: none; border: none; cursor: pointer; color: var(--encre-muet); padding: 6px; border-radius: 6px; } .btn-suppr-ligne:hover { background: var(--critique-fond); color: var(--critique); } .recap-totaux { margin-left: auto; width: 280px; margin-top: 14px; } .recap-totaux .ligne { display: flex; justify-content: space-between; padding: 6px 4px; font-size: 14px; color: var(--encre-secondaire); } .recap-totaux .ligne.total { font-size: 18px; font-weight: 700; color: var(--bleu-fonce); border-top: 1px solid var(--bordure); margin-top: 4px; padding-top: 10px; } /* ---------- Messages flash ---------- */ .flash-liste { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; } .flash { padding: 11px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 550; border: 1px solid transparent; } .flash-success { background: var(--bon-fond); color: var(--bon-texte); border-color: var(--bon-bordure); } .flash-error { background: var(--critique-fond); color: var(--critique); border-color: var(--critique-bordure); } /* ---------- Document PDF (page detail) ---------- */ .entete-document { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .bloc-client { background: var(--page); border-radius: var(--rayon); padding: 14px 16px; font-size: 13.5px; line-height: 1.6; } .bloc-client .titre-bloc { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--encre-muet); font-weight: 650; margin-bottom: 6px; } .details-cles { display: flex; gap: 28px; flex-wrap: wrap; margin: 4px 0 18px 0; } .details-cles .item .libelle { font-size: 11.5px; color: var(--encre-muet); text-transform: uppercase; letter-spacing: 0.03em; } .details-cles .item .val { font-size: 14.5px; font-weight: 600; } .liste-paiements { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .ligne-paiement { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--page); border-radius: 8px; font-size: 13.5px; } .onglets-statut { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .select-statut-inline { display: flex; gap: 8px; align-items: center; } .select-statut-inline select { width: auto; } /* ---------- Divers ---------- */ .muet { color: var(--encre-muet); } .centre { text-align: center; } hr.separateur { border: none; border-top: 1px solid var(--bordure); margin: 20px 0; } .grille-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; } .liste-simple { display: flex; flex-direction: column; } .liste-simple .item-ligne { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--bordure); font-size: 13.5px; } .liste-simple .item-ligne:last-child { border-bottom: none; } .pastille-logo-mini { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: var(--page); border: 1px solid var(--bordure); } /* ---------- Responsive ---------- */ @media (max-width: 980px) { /* Sans grid-template-rows explicite, la grille (avec min-height: 100vh) etire les deux lignes automatiques (barre + contenu) a parts egales pour combler l'espace vertical restant quand le contenu d'une page est court (peu de lignes dans le tableau, formulaire court, etc.) — ce qui donnait une barre de navigation plus ou moins haute selon la page visitee. On fige la premiere ligne a la hauteur de son propre contenu et on laisse la seconde absorber tout l'espace restant. */ .mise-en-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .barre-laterale { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 12px 14px; gap: 2px; } .barre-laterale .bas { display: none; } .nav-section-titre { display: none; } .logo-app { flex-direction: row; align-items: center; padding: 0 10px 0 0; } .logo-marque { max-width: 132px; } .sous-titre-app { display: none; } .contenu { padding: 20px; } .grille-stats { grid-template-columns: repeat(2, 1fr); } .grille-form, .grille-form.col-3, .grille-form.col-4 { grid-template-columns: 1fr; } .grille-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .grille-stats { grid-template-columns: 1fr; } } /* ---------- Table de lignes : mise en carte sur mobile ---------- Au-dela de 700px la table classique (en-tetes + colonnes) reste inchangee. En dessous, chaque ligne de devis/facture devient une carte verticale avec un libelle au-dessus de chaque champ (via data-label), pour rester lisible et confortable a saisir sur un ecran de telephone. */ @media (max-width: 700px) { table.table-lignes, table.table-lignes tbody, table.table-lignes tr, table.table-lignes td { display: block; width: auto; } table.table-lignes thead { display: none; } table.table-lignes tbody { display: flex; flex-direction: column; gap: 12px; } table.table-lignes tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; padding: 14px 44px 14px 14px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--page); } table.table-lignes td { padding: 0; } table.table-lignes td::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--encre-muet); font-weight: 650; margin-bottom: 5px; } /* Les regles .col-xxx { width: ...% } du tableau de bureau (plus haut dans ce fichier) ont une specificite superieure a "table.table-lignes td { width: auto }" ci-dessus (deux classes contre une classe+un type) : elles gagnent donc la cascade même a l'interieur de ce media query. On reinitialise ici chaque colonne individuellement, a la meme specificite, pour que la mise en carte mobile s'applique reellement. */ table.table-lignes .col-designation, table.table-lignes .col-qte, table.table-lignes .col-prix, table.table-lignes .col-tva, table.table-lignes .col-remise, table.table-lignes .col-total { width: auto; } table.table-lignes .col-designation { grid-column: 1 / -1; } table.table-lignes .col-total { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px !important; margin-top: 2px; border-top: 1px solid var(--bordure); font-size: 16px; text-align: left; } table.table-lignes .col-total::before { margin-bottom: 0; } table.table-lignes .col-suppr { position: absolute; top: 10px; right: 8px; width: auto; } table.table-lignes .col-suppr .btn-suppr-ligne { padding: 9px; font-size: 15px; } table.table-lignes input, table.table-lignes select { width: 100%; font-size: 15.5px; padding: 11px 12px; } } /* ---------- Page d'authentification : fond et apparition ---------- */ body.page-auth { position: relative; overflow: hidden; background: var(--page); } body.page-auth::before, body.page-auth::after { content: ""; position: fixed; border-radius: 50%; filter: blur(60px); z-index: 0; opacity: 0.5; pointer-events: none; } body.page-auth::before { width: 480px; height: 480px; top: -160px; left: -140px; background: radial-gradient(circle, var(--bleu) 0%, transparent 70%); } body.page-auth::after { width: 420px; height: 420px; bottom: -180px; right: -120px; background: radial-gradient(circle, var(--bleu-fonce) 0%, transparent 70%); opacity: 0.35; } [data-theme="dark"] body.page-auth::before, [data-theme="dark"] body.page-auth::after { opacity: 0.22; } .boite-auth { position: relative; z-index: 1; } @keyframes df-apparition { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .boite-auth .logo-app, .boite-auth .carte, .boite-auth .pied-auth { opacity: 0; animation: df-apparition 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .boite-auth .logo-app { animation-delay: 0.02s; } .boite-auth .carte { animation-delay: 0.1s; } .boite-auth .pied-auth { animation-delay: 0.22s; } .boite-auth .carte .champ, .boite-auth .carte > .btn { opacity: 0; animation: df-apparition 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .boite-auth .carte .champ:nth-of-type(1) { animation-delay: 0.16s; } .boite-auth .carte .champ:nth-of-type(2) { animation-delay: 0.21s; } .boite-auth .carte .champ:nth-of-type(3) { animation-delay: 0.26s; } .boite-auth .carte .champ:nth-of-type(4) { animation-delay: 0.31s; } .boite-auth .carte > .btn { animation-delay: 0.36s; } @media (prefers-reduced-motion: reduce) { .boite-auth .logo-app, .boite-auth .carte, .boite-auth .pied-auth, .boite-auth .carte .champ, .boite-auth .carte > .btn { opacity: 1; animation: none; transform: none; } }