/* * DigiSales — Logiciel propriétaire d'Electroclass. * © 2026 Electroclass. Tous droits réservés. * Usage interne exclusif. Toute reproduction, distribution, modification ou * réutilisation, totale ou partielle, sans autorisation écrite préalable * d'Electroclass est strictement interdite. */ /* ========================================================= ELECTROCLASS — Dashboard Commercial & Opérationnel Charte graphique : Dark mode digital Palette Slate 950 / Accent Cyan #38bdf8 Typographie : Karbon (titres), Lato (corps), Inter (fallback) Radius : règle des 9px ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* Surfaces */ --bg-deep: #020617; /* Slate 950 — fond profond */ --bg-surface: #0f172a; /* Slate 900 — cartes */ --bg-elevation: #1e293b; /* Slate 800 — entêtes / hover */ --bg-elevation-2: #273449; --bg-surface-2: #131e36; /* fin de dégradé des cartes/tuiles (kpi-card, chart-card) */ --panel: 15, 23, 42; /* triplet RVB des panneaux/bandeaux translucides : rgba(var(--panel), a) */ --border: #334155; /* Slate 700 */ --border-soft: #1e293b; /* Textes */ --text: #f8fafc; --text-body: #cbd5e1; --text-muted: #94a3b8; --text-caption: #64748b; /* Accents (charte Electroclass) */ --primary: #38bdf8; /* Cyan 400 */ --primary-deep: #3b82f6; /* Blue 500 */ --primary-dark: #0ea5e9; --corporate: #162883; /* Bleu corporate (print) */ /* États */ --success: #4C9D42; --warning: #F49819; --danger: #ef4444; --info: #38bdf8; /* Effets */ --glow-soft: 0 0 15px rgba(56,189,248,0.25); --glow-strong: 0 0 30px rgba(6,182,212,0.4), 0 0 8px rgba(56,189,248,0.8); --shadow-card: 0 10px 20px rgba(0,0,0,0.3); --shadow-deep: 0 20px 50px rgba(0,0,0,0.5); /* Radius (règle des 9) */ --r-sm: 4.5px; --r: 9px; --r-lg: 18px; /* Polices */ --font-heading: 'Karbon', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Lato', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Accent du Pipeline (sous-onglets de Statut, barre Prévisions, totaux pondérés). Deux variables plutôt qu'une : `-txt` sert au TEXTE posé sur le fond de la page, où il faut un ton plus profond pour rester lisible ; `--pipe-accent` sert aux aplats, bordures et fonds teintés. En sombre les deux valent le turquoise d'origine (le user le trouve plus agréable) ; le thème clair les remplace par le bleu du logo DigiSales. */ --pipe-accent: #06b6d4; --pipe-accent-txt: #06b6d4; } /* ========================================================= THÈME CLAIR — surcharge des variables (html[data-theme="light"]). Le mode sombre reste le défaut ; ce bloc ne s'applique que lorsque l'utilisateur bascule en clair via le bouton (choix mémorisé). ========================================================= */ :root[data-theme="light"] { /* Surfaces */ --bg-deep: #f1f5f9; /* fond page */ --bg-surface: #ffffff; /* cartes */ --bg-elevation: #e2e8f0; /* entêtes / hover */ --bg-elevation-2: #cbd5e1; --bg-surface-2: #eef2f7; /* fin de dégradé clair des cartes/tuiles */ --panel: 226, 232, 240; /* panneaux/bandeaux translucides clairs (slate-200) */ --border: #cbd5e1; --border-soft: #e2e8f0; /* Textes */ --text: #0f172a; --text-body: #1e293b; --text-muted: #475569; --text-caption: #64748b; /* Accents — cyan plus profond pour un bon contraste sur fond clair */ --primary: #0284c7; --primary-deep: #2563eb; --primary-dark: #0369a1; /* Accent du Pipeline en thème clair = BLEU DU LOGO DigiSales (#0ea5e9, la teinte de départ du dégradé de l'icône) pour les aplats et bordures ; le texte prend le même bleu un cran plus profond (#0284c7, déjà `--primary` ici) car #0ea5e9 sur blanc tombe sous le seuil de lisibilité en petit corps. */ --pipe-accent: #0ea5e9; --pipe-accent-txt: #0284c7; /* Effets adoucis */ --glow-soft: 0 0 0 1px rgba(2,132,199,0.10); --glow-strong: 0 6px 18px rgba(2,132,199,0.20); --shadow-card: 0 1px 3px rgba(var(--panel),0.10), 0 1px 2px rgba(var(--panel),0.06); --shadow-deep: 0 12px 30px rgba(var(--panel),0.16); } :root[data-theme="light"] body { background-image: radial-gradient(circle at 20% 0%, rgba(56,189,248,0.08) 0%, rgba(241,245,249,0) 45%), radial-gradient(circle at 80% 100%, rgba(59,130,246,0.06) 0%, rgba(241,245,249,0) 50%), radial-gradient(circle at center, #ffffff 0%, #eef2f7 100%); } /* Logo Electroclass : tracés blancs -> sombres en mode clair (carrés cyan inchangés). */ :root[data-theme="light"] .brand-logo path[fill="#f8fafc"] { fill: #0f172a; } /* --- Logo DigiSales : le carré du sommet suit le mot « Digi » (v2.418) ---------- RÈGLE, valable dans les DEUX thèmes : le carré du SOMMET a la couleur du mot « Digi » et les 9 autres celle du mot « Sales » (bleu de marque #38bdf8, posé à plat dans le SVG, identique en clair et en sombre). « Digi » suit var(--text) : blanc en sombre, bleu nuit en clair. Le carré du sommet est donc `#f8fafc` dans le SVG et bascule ici, exactement comme la règle du logo Electroclass juste au-dessus. Historique : la v2.417 faisait l'INVERSE (9 carrés bleu nuit + sommet bleu), ce qui cassait la correspondance carré-du-haut/« Digi » visible en mode sombre. Plus aucun dégradé ni halo (retirés à la source : SVG + .digisales-logo/.accent), donc plus besoin de `filter: none` ni de surcharge sur « Sales » ici. */ :root[data-theme="light"] .digisales-logo rect[fill="#f8fafc"] { fill: #0f172a; } /* En-tête : le dégradé est codé en dur (sombre) -> on l'éclaircit en mode clair. */ :root[data-theme="light"] .app-header { background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(241,245,249,0.88) 100%); } /* Lignes « offre perdue » : fond eclairci par --panel -> on repasse le texte en sombre. */ :root[data-theme="light"] .data-table tbody tr.offre-perdue { color: var(--text-body); } /* === Mode clair : pastilles statut / type / action / échéance / jauge === En sombre, le texte est un pastel clair sur fond translucide ; sur fond clair il faut un texte plus FONCÉ (≈ teinte 700) pour rester lisible sur l'aplat coloré. On ne change que la couleur du texte. */ /* Statuts (badges génériques) */ :root[data-theme="light"] .badge.success { color: #15803d; } :root[data-theme="light"] .badge.danger { color: #b91c1c; } :root[data-theme="light"] .badge.warning { color: #b45309; } :root[data-theme="light"] .badge.violet { color: #6d28d9; } :root[data-theme="light"] .badge.sky { color: #0369a1; } :root[data-theme="light"] .badge.primary { color: #1d4ed8; } :root[data-theme="light"] .badge.negociation { color: #0f766e; } :root[data-theme="light"] .badge.indigo { color: #4338ca; } :root[data-theme="light"] .badge.rose { color: #be185d; } :root[data-theme="light"] .badge.fuchsia { color: #a21caf; } :root[data-theme="light"] .badge.lime { color: #4d7c0f; } :root[data-theme="light"] .badge.emeraude { color: #047857; } :root[data-theme="light"] .badge.jaune { color: #a16207; } :root[data-theme="light"] .badge.ardoise { color: #334155; } /* Types machine / gammes (Cartes Trello, Vente Annuelle, Stockage / Classement) */ :root[data-theme="light"] .badge.gamme-distrib { color: #1d4ed8; } :root[data-theme="light"] .badge.gamme-stock { color: #b45309; } :root[data-theme="light"] .badge.gamme-classement { color: #15803d; } :root[data-theme="light"] .badge.gamme-divers { color: #334155; } :root[data-theme="light"] .badge.gamme-info { color: #6d28d9; } /* Actions (Gestion des Leads) */ :root[data-theme="light"] .badge.action-attente { color: #b45309; } :root[data-theme="light"] .badge.action-plus { color: #334155; } :root[data-theme="light"] .badge.action-rappeler { color: #b91c1c; } :root[data-theme="light"] .badge.action-doc { color: #0369a1; } :root[data-theme="light"] .badge.action-faire-offre { color: #a16207; } :root[data-theme="light"] .badge.action-offre { color: #15803d; } :root[data-theme="light"] .badge.action-rdv { color: #0f766e; } /* Échéances (Tâches) */ :root[data-theme="light"] .echeance-calme { color: #15803d; } :root[data-theme="light"] .echeance-proche { color: #b45309; } :root[data-theme="light"] .echeance-aujourdhui { color: #c2410c; } :root[data-theme="light"] .echeance-retard { color: #b91c1c; } /* Sélecteur d'année (badges sous le nom) */ :root[data-theme="light"] .year-selector-btn .year-badge.is-current { color: #0369a1; } :root[data-theme="light"] .year-selector-btn .year-badge.is-future { color: #0f766e; } :root[data-theme="light"] .year-selector-btn .year-badge.is-archive { color: #475569; } /* Fraîcheur des données */ :root[data-theme="light"] .data-freshness.fresh { color: #15803d; } :root[data-theme="light"] .data-freshness.stale { color: #b45309; } :root[data-theme="light"] .data-freshness.missing { color: #b91c1c; } /* Spotlights (tableau de bord Tâches) */ :root[data-theme="light"] .spotlight-retard .spotlight-number, :root[data-theme="light"] .spotlight-retard .sl-tag { color: #b91c1c; } :root[data-theme="light"] .spotlight-today .spotlight-number, :root[data-theme="light"] .spotlight-today .sl-tag { color: #c2410c; } :root[data-theme="light"] .spotlight-semaine .spotlight-number, :root[data-theme="light"] .spotlight-semaine .sl-tag { color: #0369a1; } :root[data-theme="light"] .spotlight-card.is-empty .spotlight-number { color: #15803d; } /* Jauges (pourcentage central) */ :root[data-theme="light"] .gauge-text.gauge-ok .gauge-percent { color: #15803d; } :root[data-theme="light"] .gauge-text.gauge-warning .gauge-percent { color: #b45309; } :root[data-theme="light"] .gauge-text.gauge-danger .gauge-percent { color: #b91c1c; } :root[data-theme="light"] .gauge-text.gauge-blue .gauge-percent { color: #1d4ed8; } :root[data-theme="light"] .gauge-text.gauge-blue .gauge-value { color: var(--text); } /* Cellules éditables vides : le texte indicatif (« Montant… », « Cliquez pour écrire… ») était trop pâle sur les lignes blanches (opacity 0.6 héritée) -> lisible en mode clair. */ :root[data-theme="light"] .cell-edit-text:empty::before { color: #64748b; opacity: 1; } /* --- Bouton de bascule de thème (soleil / lune) --- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--bg-elevation); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .ic-moon { display: none; } :root[data-theme="light"] .theme-toggle .ic-sun { display: none; } :root[data-theme="light"] .theme-toggle .ic-moon { display: block; } /* --- Bascule de densité d'affichage (Complet / Compact) --- */ .view-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--bg-elevation); border: 1px solid var(--border); border-radius: var(--r); } .view-toggle .vt-opt { appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: calc(var(--r) - 2px); white-space: nowrap; transition: color .15s ease, background .15s ease, box-shadow .15s ease; } .view-toggle .vt-opt:hover { color: var(--text); } .view-toggle .vt-opt.is-active { background: var(--bg-surface); color: var(--primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); } /* --- Menu « Affichage » : regroupe densité + couleurs + thème sous une icône --- */ .appearance-menu { position: relative; display: inline-flex; } .appearance-panel { min-width: 250px; } .appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 8px; border-radius: 6px; } .appearance-row + .appearance-row { border-top: 1px solid var(--border-soft); } .appearance-label { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } /* Dans le menu, le bouton de thème redevient une simple bascule alignée à droite. */ .appearance-row .theme-toggle { width: 34px; height: 30px; } /* Pipeline — sous-onglets par statut : pilules modernes, charte Electroclass (cyan --primary + glow sur l'actif), adaptées thème sombre ET clair via les variables. Compteur en chip intégré. */ .pipeline-statut-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; align-items: center; } /* Bascule des sous-onglets de Statut : bouton dans la BARRE D'OUTILS (#pipeline-statut-btn) qui affiche le filtre actif + compteur ; la ligne de puces #pipeline-statut-tabs s'affiche/se masque en dessous (attribut hidden). Style .pipe-stab (turquoise de la charte, .chip-count natif) — hors du sélecteur i18n .btn-action qui réécrit innerHTML. Taille alignée sur les .btn de la barre. */ /* Double classe (.pipe-stab.pipe-statut-btn) pour battre en spécificité la règle `.pipe-stab { padding:7px 14px; font-size:12px }` définie plus bas (sinon, à spécificité égale, la dernière l'emportait → bouton Statut plus court que Créer/Vue). Les PUCES de sous-onglets (.pipe-stab sans .pipe-statut-btn) gardent leur petite taille. */ .pipe-stab.pipe-statut-btn { padding: 5px 16px; font-size: 13px; font-family: var(--font-body); } /* La pastille compteur a une hauteur fixe (18px) pensée pour les PUCES de sous-onglets ; dans le bouton Statut de la barre elle dépassait la ligne de texte et rendait le bouton plus HAUT que Créer/Vue. Ici on la laisse épouser la ligne (hauteur auto) → même hauteur. */ .pipe-stab.pipe-statut-btn .chip-count { height: auto; min-width: auto; padding: 0 7px; line-height: 1; } .pipe-statut-btn .pipe-statut-active { display: inline-flex; align-items: center; gap: 8px; } .pipe-statut-btn .pst-caret { opacity: 0.75; transition: transform .18s ease; } .pipe-statut-btn.is-open .pst-caret { transform: rotate(180deg); } /* Bascule du bloc statistiques du Pipeline (bouton « Stats »). Replié : la classe pipe-stats-off (sur #panel-pipeline) masque jauges + tuiles + graphiques → gain de place « tableau d'abord ». Caret vers le haut quand affiché (is-open). Le bouton disparaît si le mode « Compact » global est déjà actif (stats deja masquées). */ .pipe-stats-btn .pst-caret { opacity: 0.75; transition: transform .18s ease; } .pipe-stats-btn.is-open .pst-caret { transform: rotate(180deg); } #panel-pipeline.pipe-stats-off #pipeline-gauges, #panel-pipeline.pipe-stats-off #pipeline-kpis, #panel-pipeline.pipe-stats-off #pipeline-charts { display: none; } html.vue-compacte #pipeline-stats-btn { display: none; } /* Barre « Prévisions » (filtre inline du tableau) : choix du critère + résumé + export. */ .pipeline-previsions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 12px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--pipe-accent) 30%, var(--border-soft)); border-radius: 10px; background: color-mix(in srgb, var(--pipe-accent) 6%, var(--bg-surface)); } #pipeline-previsions-btn.is-active { color: var(--pipe-accent-txt); border-color: var(--pipe-accent); background: color-mix(in srgb, var(--pipe-accent) 14%, var(--bg-surface)); } /* Prévisions — totaux de l'extraction. Trois rendus des MÊMES chiffres : la ligne de la barre (ci-dessus), ce bandeau de tuiles (bascule « ▦ Tuiles ») et le pied du tableau. Les valeurs pondérées portent l'accent du Pipeline pour se distinguer d'un coup d'œil des montants bruts. */ .pipeline-prev-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: -6px 0 12px; } .prev-tile { padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--pipe-accent) 22%, var(--border-soft)); border-radius: 10px; background: color-mix(in srgb, var(--pipe-accent) 4%, var(--bg-surface)); } .prev-tile-lbl { font-size: 11px; color: var(--text-muted); letter-spacing: 0.2px; } .prev-tile-val { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--text-body); } .prev-tile.is-pond .prev-tile-val { color: var(--pipe-accent-txt); } /* Mêmes valeurs pondérées quand les totaux sont affichés SUR LA LIGNE de la barre (bascule « Ligne ») : même accent que les tuiles, pour qu'on les distingue des montants bruts quel que soit l'affichage choisi. */ .pipeline-previsions-bar .prev-pond { color: var(--pipe-accent-txt); } /* Pied de tableau : sous-total sous les colonnes, COLLÉ en bas de la zone de défilement (même principe que l'en-tête collant), donc toujours lisible sans dérouler jusqu'au bout. */ #table-pipeline tfoot tr.pipe-foot-total td { position: sticky; bottom: 0; z-index: 3; padding: 4px 10px; border-top: 2px solid color-mix(in srgb, var(--pipe-accent) 45%, var(--border-soft)); background: color-mix(in srgb, var(--pipe-accent) 8%, var(--bg-surface)); white-space: nowrap; line-height: 1.2; } #table-pipeline tfoot .pf-num { text-align: right; } #table-pipeline tfoot .pf-lbl { font-weight: 700; color: var(--text-body); } #table-pipeline tfoot .pf-main { font-weight: 700; color: var(--text-body); } #table-pipeline tfoot .pf-sub { font-size: 11px; font-weight: 600; color: var(--pipe-accent-txt); } @media (max-width: 640px) { .pipeline-prev-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prev-tile-val { font-size: 17px; } } /* Sous-onglets de Statut du Pipeline et critères de la barre Prévisions : accent `--pipe-accent` — turquoise de la charte Electroclass (#06b6d4) en thème sombre, bleu du logo DigiSales (#0ea5e9) en thème clair. */ .pipe-stab { appearance: none; cursor: pointer; font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; --pipe-turq: var(--pipe-accent); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; /* Forme rectangulaire (comme les boutons « Créer », etc.) plutôt qu'en pilule. */ border-radius: var(--r); color: var(--pipe-accent-txt); background: var(--bg-surface); border: 1px solid color-mix(in srgb, var(--pipe-turq) 38%, var(--border-soft)); transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .pipe-stab:hover { color: var(--pipe-accent-txt); border-color: var(--pipe-turq); } .pipe-stab.is-active { color: #fff; border-color: var(--pipe-turq); background: var(--pipe-turq); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pipe-turq) 40%, transparent), 0 3px 14px -5px color-mix(in srgb, var(--pipe-turq) 60%, transparent); } .pipe-stab .chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; background: color-mix(in srgb, var(--pipe-turq) 18%, transparent); color: var(--pipe-turq); } .pipe-stab.is-active .chip-count { background: color-mix(in srgb, #fff 30%, transparent); color: #fff; } /* Pipeline — en-têtes de colonnes réordonnables par glisser-déposer. */ #table-pipeline thead th[draggable="true"] { cursor: grab; user-select: none; } #table-pipeline thead th[draggable="true"]:active { cursor: grabbing; } /* Pipeline / Tâches — la poignée de redimensionnement (.col-resizer, position:absolute) a besoin d'un en-tête « positionné » comme référence. On utilise `sticky` (et NON `relative`) : `sticky` sert AUSSI de bloc conteneur pour l'absolu ET fige l'en-tête verticalement (top:0). `relative` cassait le figement vertical des en-têtes. */ #table-pipeline thead th:not(.col-frozen), #table-taches thead th:not(.col-frozen) { position: sticky; top: 0; } #table-pipeline .col-resizer, #table-taches .col-resizer { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; z-index: 4; } #table-pipeline .col-resizer::after, #table-taches .col-resizer::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 2px; width: 2px; border-radius: 2px; background: var(--border); opacity: 0; transition: opacity 0.15s; } #table-pipeline .col-resizer:hover::after, #table-pipeline .col-resizer:active::after, #table-taches .col-resizer:hover::after, #table-taches .col-resizer:active::after { opacity: 1; background: var(--primary); } /* Mise en page fixe quand des largeurs sont définies : les largeurs d'en-tête font foi ; le contenu qui dépasse est masqué (élargir la colonne le révèle). */ #table-pipeline.pipe-table-fixed, #table-taches.pipe-table-fixed { table-layout: fixed; } #table-pipeline.pipe-table-fixed th, #table-pipeline.pipe-table-fixed td, #table-taches.pipe-table-fixed th, #table-taches.pipe-table-fixed td { overflow: hidden; } /* Pagination (perf) : « Afficher plus » en pied de tableau, rendu comme une BANDE PLEINE LARGEUR (repli visible du chargement automatique au défilement) — plus découvrable qu'un petit bouton centré. La cellule ne colle pas à une colonne : padding 0 + overflow visible (sinon table-layout:fixed la clipperait). */ #table-pipeline tr.pipe-loadmore-row td { padding: 0; overflow: visible; background: transparent; } #table-pipeline tr.pipe-loadmore-row:hover td { background: transparent; } /* Virtualisation du Pipeline (Vague 3 phase 2e, mode ?vlist=1). Lignes a UNE ligne de texte (hauteur uniforme -> calcul d'index de bande trivial) : le contenu long est coupe avec des points de suspension ; la borne max-width donne une largeur de reference aux colonnes auto (sans elle, nowrap les etirerait a la longueur du plus long contenu). Les espaceurs haut/bas simulent la hauteur des lignes non materialisees (~60 reels). */ #table-pipeline.pipe-virtual td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 300px; } #table-pipeline tr.pipe-vspace td { padding: 0 !important; border: 0 !important; background: transparent !important; } #table-pipeline tr.pipe-vspace:hover td { background: transparent !important; } .pipe-loadmore-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 11px 14px; border: none; border-top: 1px solid var(--border-soft); background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary); font: 600 13px var(--font-body, inherit); cursor: pointer; transition: background .12s; } .pipe-loadmore-btn:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); } .pipe-loadmore-more { font-weight: 700; } .pipe-loadmore-count { font-size: 12px; font-weight: 500; opacity: .7; } /* Deux boutons de réinitialisation (Ordre / Largeurs) dans le panneau Colonnes. */ .pipe-col-resets { display: inline-flex; gap: 6px; } /* Pipeline — panneau « Colonnes » (cases à cocher afficher/masquer), thème-aware. */ /* Le bouton « ⚙ Colonnes » ancre son menu : le panneau flotte PAR-DESSUS le tableau (positionné en absolu sous le bouton), au lieu de pousser le contenu. */ .pipe-col-anchor { position: relative; display: inline-flex; } #pipeline-col-panel, #taches-col-panel { position: absolute; top: calc(100% + 6px); z-index: 100; } /* Pipeline : bouton à droite de la barre → panneau ancré à droite (s'ouvre vers la gauche). */ #pipeline-col-panel { right: 0; } /* Tâches : bouton à gauche de la barre → panneau ancré à gauche (s'ouvre vers la droite, reste à l'écran au lieu de déborder hors cadre à gauche). */ #taches-col-panel { left: 0; } .pipe-col-menu { display: inline-block; min-width: 264px; max-width: 340px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .65); } .pipe-col-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pipe-col-menu-title { font-weight: 700; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--primary); } .pipe-col-reset { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-soft)); background: transparent; color: var(--text-caption); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .pipe-col-reset:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); } /* Croix de fermeture du menu « Colonnes » (Pipeline et Tâches). Détachée des pastilles « ↺ » par une marge : c'est une action de fenêtre, pas un réglage de colonnes — on ne doit pas la cliquer par erreur en visant « Ordre ». */ .pipe-col-close { margin-left: 4px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-soft); border-radius: 6px; background: transparent; color: var(--text-caption); font-size: 13px; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .pipe-col-close:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .pipe-col-menu-sub { margin: 4px 0 12px; font-size: 11px; color: var(--text-caption); } .pipe-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 56vh; overflow-y: auto; } .pipe-col-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; border: 1px solid transparent; background: color-mix(in srgb, var(--text) 4%, transparent); transition: background .12s, border-color .12s, box-shadow .12s, opacity .12s; } .pipe-col-item:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } .pipe-col-item.is-hidden { opacity: .55; } .pipe-col-item.dragging { opacity: .4; } .pipe-col-item.drag-over { border-color: transparent; box-shadow: inset 0 3px 0 -1px var(--pipe-turq); } .pipe-col-grip { display: inline-flex; color: var(--text-caption); cursor: grab; flex: 0 0 auto; } .pipe-col-grip:active { cursor: grabbing; } .pipe-col-item:hover .pipe-col-grip { color: var(--pipe-turq); } .pipe-col-check { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; cursor: pointer; font-size: 13px; color: var(--text-body); } .pipe-col-check input { cursor: pointer; accent-color: var(--primary); width: 15px; height: 15px; flex: 0 0 auto; } .pipe-col-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Vue compacte : masque l'en-tête visuel (jauges + tuiles KPI + mini-graphes + spotlight) des onglets de travail. L'onglet Tableau de Bord (#panel-analyses) est épargné car il EST, par nature, fait de ces éléments. */ html.vue-compacte .tab-panel:not(#panel-analyses) [id^="gauge-"], /* Pipeline : conteneur de jauges + donut (id « pipeline-gauges », sans classe « gauge- » → non capté par le sélecteur ci-dessus). */ html.vue-compacte .tab-panel:not(#panel-analyses) #pipeline-gauges, html.vue-compacte .tab-panel:not(#panel-analyses) .kpi-row, html.vue-compacte .tab-panel:not(#panel-analyses) .charts-row, html.vue-compacte .tab-panel:not(#panel-analyses) .spotlight-row, /* Trimestres T1-T4 : jauge Prime sur Marge + tuile Suivi des Paiements (toutes deux dans .trimestre-gauge-row). Total Annuel épargné (vue de synthèse). */ html.vue-compacte .tab-panel:not(#panel-analyses) .trimestre-gauge-row:not(#trim-gauge-total) { display: none !important; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg-deep); background-image: radial-gradient(circle at 20% 0%, rgba(56,189,248,0.07) 0%, rgba(2,6,23,0) 45%), radial-gradient(circle at 80% 100%, rgba(59,130,246,0.06) 0%, rgba(2,6,23,0) 50%), radial-gradient(circle at center, #0a1224 0%, #020617 100%); background-attachment: fixed; color: var(--text-body); font-size: 14px; line-height: 1.5; min-height: 100vh; } .hidden { display: none !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: var(--bg-elevation); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--bg-elevation-2); } /* ====================== HEADER ====================== */ .app-header { background: linear-gradient(180deg, rgba(2,6,23,0.95) 0%, rgba(var(--panel),0.85) 100%); border-bottom: 1px solid var(--border-soft); /* Hauteur réduite (v2.416) : padding VERTICAL 18 -> 8px => bandeau 75 -> 55px, à TAILLE DE LOGOS INCHANGÉE (.brand-logo 36px, .digisales-logo 40px). Plancher = le bloc DigiSales (40px, en position absolue) : ne pas descendre sous ~50px sans réduire les logos. ⚠ `.tabs { top }` DOIT suivre cette hauteur (voir ce sélecteur). */ padding: 8px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; } .brand { display: flex; align-items: center; gap: 16px; } .brand-text { position: absolute; left: 50%; top: 50%; /* Centrage EXACT (v2.416). L'ancien décalage `- 6px` compensait le sous-titre « By ClaudeChris » affiché sous le wordmark ; ce sous-titre a été RETIRÉ (v2.265), le décalage était donc devenu obsolète et déséquilibrait le bloc (mesuré : 11px de marge en haut contre 24px en bas). Sans lui, le bloc est vraiment centré — ce qui est indispensable maintenant que le bandeau est plus court (55px). */ transform: translate(-50%, -50%); text-align: center; pointer-events: none; } .brand-text .subtitle { text-align: center; margin-top: 1px; font-family: 'Segoe UI', 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: none; background: linear-gradient(90deg, #ff8a00 0%, #ff5e3a 50%, #ffb347 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 18px rgba(255,138,0,0.55); filter: drop-shadow(0 0 6px rgba(255,94,58,0.35)); } .brand-logo { height: 36px; width: auto; filter: drop-shadow(0 0 10px rgba(56,189,248,0.35)); } /* Ligne titre centrée : icône DigiSales accolée à gauche du nom "DigiSales" */ .brand-title-row { display: flex; align-items: flex-start; /* le logo s'aligne sur la ligne "DigiSales", pas sur le bloc entier */ justify-content: center; gap: 10px; } /* Wordmark "Digi" + "Sales" sur une ligne. La pastille version est hors flux, à droite de "Sales", avec son BAS aligné sur le bas du logo/wordmark "DigiSales" (logo et wordmark font ~40px, alignés en haut dans .brand-title-row). */ .brand-wordmark { display: flex; align-items: flex-start; } .brand-sales-wrap { position: relative; } .brand-sales-wrap .app-version { position: absolute; left: 100%; bottom: 0; /* bas de la pastille = bas de "Sales" = bas du logo */ margin-left: 12px; white-space: nowrap; z-index: 20; /* au-dessus du fond du header pour rester cliquable */ pointer-events: auto; /* garantit le clic même si un parent le neutralise */ } .digisales-logo { height: 40px; width: auto; flex-shrink: 0; /* Halo retiré (v2.418) : logo entièrement PLAT dans les deux thèmes. Sur fond clair il délavait les contours ; sur fond sombre il faisait doublon avec le bleu vif. */ } .brand-text h1 { margin: 0; font-family: var(--font-heading); font-size: 40px; font-weight: 800; letter-spacing: 0.5px; line-height: 1; color: var(--text); } /* Mot « Sales » (v2.418) : à PLAT, dans le bleu de marque — le MÊME que les carrés du logo, en clair comme en sombre. Remplace le dégradé `background-clip: text` + halo (pensés pour un fond sombre) qui le rendaient délavé sur blanc. « Digi » (.brand-digi) n'a pas de règle propre : il suit var(--text), donc blanc en sombre / bleu nuit en clair. */ .brand-text h1 .accent { color: #38bdf8; } .data-freshness { display: inline-flex; align-items: center; padding: 5px 10px; font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px; color: var(--text-muted); background: var(--bg-elevation); border: 1px solid var(--border); border-radius: var(--r); white-space: nowrap; line-height: 1.2; } .data-freshness.fresh { color: #86d175; border-color: rgba(76,157,66,0.4); background: rgba(76,157,66,0.10); } .data-freshness.stale { color: #fbbf3a; border-color: rgba(244,152,25,0.4); background: rgba(244,152,25,0.10); } .data-freshness.missing { color: #f87171; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.10); } /* Version : petite pastille (entourage conservé) à droite de "By ClaudeChris" */ .brand-text .app-version { display: inline-block; margin-left: 7px; padding: 1px 7px; font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: var(--primary); -webkit-text-fill-color: var(--primary); /* annule le dégradé orange du sous-titre */ background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.3); border-radius: 999px; vertical-align: middle; text-shadow: none; box-shadow: 0 0 10px rgba(56,189,248,0.15); } .brand-text .subtitle { color: var(--text-muted); } .header-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ====================== TABS ====================== */ .tabs { background: var(--bg-surface); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; position: sticky; /* ⚠ COUPLÉ à la hauteur de `.app-header` : on colle 3px SOUS son bord bas (léger chevauchement volontaire — cf. le calcul de `--pipe-chrome` dans DigiSales.html). En-tête 55px (v2.416, était 75) -> 52px (était 72). Toute modification du padding vertical de .app-header doit mettre cette valeur à jour, sinon : valeur trop grande = interstice où les lignes défilent ; trop petite = onglets masqués sous l'en-tête. */ top: 52px; z-index: 49; backdrop-filter: blur(12px); } .tabs-list { display: flex; overflow-x: auto; flex: 1 1 auto; min-width: 0; } .tabs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0; /* réduit la hauteur du bandeau des onglets */ flex-shrink: 0; } /* Chip d'identification de session (a droite des onglets) : conteneur neutre, layout HORIZONTAL — sélecteur d'année + pastille utilisateur (+ filtre « Voir ») sur UNE SEULE ligne, pour réduire la hauteur du bandeau des onglets. */ .session-chip { display: inline-flex; flex-direction: row; align-items: center; /* les pilules (année / nom / filtre) alignées sur une ligne */ flex-wrap: wrap; /* si l'espace manque (petits écrans), on passe à la ligne au lieu de déborder */ justify-content: flex-end; gap: 8px; flex-shrink: 0; padding: 2px 0; font-family: var(--font-heading); position: relative; /* ancre du dropdown du menu utilisateur (mode API) */ } /* Sous-bouton "utilisateur connecte" : declenche le prompt de modification du nom. */ .session-chip .session-user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.22); border-radius: 16px; font-family: inherit; font-size: 12px; color: var(--text-body); cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; user-select: none; } .session-chip .session-user:hover { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.40); } .session-chip .session-icon { display: inline-flex; align-items: center; color: var(--primary); /* SVG fill="currentColor" -> cyan */ line-height: 1; } .session-chip .session-icon svg { display: block; } .session-chip .session-name { font-weight: 600; letter-spacing: 0.2px; } /* Selecteur d'annee (meme ligne que le nom) : meme philosophie pill, plus compact */ .session-chip .year-selector-btn { padding: 4px 12px; font-size: 12px; border-radius: 16px; gap: 6px; } .session-chip .year-selector-btn .year-icon { font-size: 13px; } .session-chip .year-selector-btn .year-badge { font-size: 9px; padding: 1px 5px; } @media (max-width: 900px) { .session-chip { gap: 3px; } .session-chip .session-user { font-size: 11px; padding: 3px 10px; gap: 6px; } .session-chip .year-selector-btn { font-size: 11px; padding: 3px 10px; } } /* Rangée du bas de la chip session : filtre « Voir » (mode API, rôles viewAll) aligné sur la MÊME ligne que la pastille utilisateur. */ .session-chip .session-user-row { display: inline-flex; align-items: center; gap: 8px; } /* Filtre « Voir : par commercial » (rôles viewAll, mode API — api-mode-writes.js). Pilule pleine turquoise→cyan (charte Electroclass : cyan-500 #06b6d4 / accent #38bdf8) : contrairement aux pastilles translucides voisines, elle doit SAUTER AUX YEUX de la direction/admin. Texte slate 950 pour le contraste (les deux thèmes gardent la même pilule, le dégradé reste lisible sur clair et sombre). */ .owner-filter { position: relative; } .owner-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: linear-gradient(90deg, #06b6d4, #38bdf8); border: 1px solid rgba(103, 232, 249, 0.55); /* cyan-300 */ border-radius: 16px; font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: #020617; cursor: pointer; white-space: nowrap; box-shadow: 0 0 12px rgba(6, 182, 212, 0.35); transition: box-shadow 0.15s, filter 0.15s; user-select: none; } .owner-filter-btn:hover { filter: brightness(1.08); box-shadow: 0 0 18px rgba(6, 182, 212, 0.50); } .owner-filter-btn .of-value { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .owner-filter-btn .of-caret { font-size: 10px; opacity: 0.75; } /* Menu du filtre : même langage que les menus Outils/compte (fond thème, coins 10px, ombre profonde, items .tools-menu-item avec survol cyan). */ .owner-filter-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; max-height: 320px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 60; display: flex; flex-direction: column; gap: 2px; } .owner-filter-dropdown .ofd-header { font-family: var(--font-heading); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px 6px; } .owner-filter-dropdown .tools-menu-item.active { background: rgba(6, 182, 212, 0.14); border-color: rgba(6, 182, 212, 0.35); color: var(--primary); font-weight: 700; } @media (max-width: 900px) { .session-chip .session-user-row { gap: 6px; } .owner-filter-btn { font-size: 11px; padding: 3px 10px; } .owner-filter-btn .of-value { max-width: 110px; } } /* Onglet Tâches masqué (réglage « Affichage » par commercial, cf. DigiOngletTaches). */ html.masquer-onglet-taches nav.tabs .tab[data-tab="taches"] { display: none; } .tab { background: transparent; border: none; padding: 8px 12px; /* onglets compactés : padding horizontal réduit 20→12 px (vertical 8px inchangé) — moins d'espace perdu autour du nom */ font-family: var(--font-heading); font-size: 14px; font-weight: 600; letter-spacing: 0.2px; /* espacement des lettres resserré (était 0.5px) : noms d'onglets plus compacts */ text-transform: uppercase; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s ease; white-space: nowrap; position: relative; } .tab:hover { color: var(--primary); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(56,189,248,0.35); text-shadow: 0 0 12px rgba(56,189,248,0.4); } /* Icônes SVG des onglets / sous-onglets : monochrome au trait (couleur = texte via currentColor → theme-aware, hérite du survol/actif). Taille fixe, alignées au texte. Onglets/sous-onglets restent en `inline` (pas flex) pour ne pas casser le « 1ᵉʳ Trimestre » () : on aligne l'icône via vertical-align. */ .tab .tab-ic, .subtab .tab-ic { width: 16px; height: 16px; vertical-align: -0.18em; margin-right: 5px; /* espace icône↔texte resserré (était 7px) */ } .subtab .tab-ic { width: 15px; height: 15px; margin-right: 6px; } /* ====================== SHEET SELECTOR ====================== */ .sheet-selector { background: linear-gradient(160deg, rgba(244,152,25,0.08), rgba(244,152,25,0.02)); border-bottom: 1px solid rgba(244,152,25,0.3); padding: 14px 28px; } .sheet-selector h3 { margin: 0 0 10px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--warning); } .mapping-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; } .mapping-row label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; gap: 4px; } .mapping-row select { padding: 8px 12px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r); min-width: 180px; color: var(--text); font-family: var(--font-body); font-size: 13px; } .mapping-row select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(56,189,248,0.15); } /* ====================== MAIN ====================== */ main { padding: 10px 28px 24px; } /* espace tabs↔barre d'outils = espace barre↔sous-onglets (~14px) */ .tab-panel { display: none; animation: fadeIn 0.25s ease; } .tab-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ====================== SÉLECTEUR D'ANNÉE (header) ====================== */ .year-selector { position: relative; } .year-selector-btn { display: flex; align-items: center; gap: 8px; background: rgba(var(--panel), 0.6); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 14px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.5px; color: var(--text-body); cursor: pointer; transition: all 0.18s ease; } .year-selector-btn:hover { border-color: var(--primary); background: rgba(56, 189, 248, 0.10); } .year-selector-btn .year-icon { font-size: 14px; } .year-selector-btn .year-label { font-weight: 600; } .year-selector-btn .year-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; font-weight: 700; } .year-selector-btn .year-badge.is-current { background: rgba(56, 189, 248, 0.22); /* Cyan 400 brand Electroclass */ color: #7dd3fc; /* Cyan 300 (plus clair sur fond sombre) */ border: 1px solid rgba(56, 189, 248, 0.50); } .year-selector-btn .year-badge.is-archive { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.35); } .year-selector-btn .year-badge.is-future { background: rgba(20, 184, 166, 0.20); /* teal = année à venir, modifiable */ color: #5eead4; border: 1px solid rgba(20, 184, 166, 0.50); } .year-selector-btn .year-caret { color: var(--text-muted); font-size: 10px; margin-left: 2px; } .year-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 60; } .year-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 6px; font-family: var(--font-heading); font-size: 13px; cursor: pointer; color: var(--text-body); transition: background 0.12s; } .year-menu-item:hover { background: rgba(56, 189, 248, 0.10); } .year-menu-item.is-active { background: rgba(56, 189, 248, 0.18); color: var(--primary); } .year-menu-item .ymi-year { font-weight: 700; font-size: 14px; } .year-menu-item .ymi-badge { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; } .year-menu-item .ymi-badge.is-current { background: rgba(56, 189, 248, 0.22); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.50); } .year-menu-item .ymi-badge.is-future { background: rgba(20, 184, 166, 0.20); color: #5eead4; border: 1px solid rgba(20, 184, 166, 0.50); } .year-menu-item .ymi-badge.is-archive { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; } .year-menu-separator { height: 1px; background: var(--border-soft); margin: 6px 4px; } .year-menu-action { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 12px; font-family: var(--font-heading); font-size: 12px; color: var(--text-body); cursor: pointer; text-align: left; margin-top: 4px; } .year-menu-action:hover { background: rgba(56, 189, 248, 0.10); border-color: var(--primary); } /* ====================== BANDEAU LECTURE SEULE ARCHIVE ====================== */ .read-only-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, rgba(244, 152, 25, 0.18), rgba(244, 152, 25, 0.06)); border-bottom: 1px solid rgba(244, 152, 25, 0.35); padding: 10px 28px; font-family: var(--font-heading); font-size: 13px; color: #fbbf24; letter-spacing: 0.5px; } .read-only-banner.hidden { display: none; } .read-only-banner .rob-icon { font-size: 18px; } .read-only-banner .rob-text { flex: 1; } .read-only-banner .rob-back { background: rgba(244, 152, 25, 0.18); border: 1px solid rgba(244, 152, 25, 0.4); border-radius: 6px; padding: 6px 12px; color: #fde68a; font-family: inherit; font-size: 12px; cursor: pointer; } .read-only-banner .rob-back:hover { background: rgba(244, 152, 25, 0.28); } /* En mode archive, on grise les boutons d'écriture et on bloque les inputs. La classe .archive-mode est posée sur par app.js. */ body.archive-mode .btn-action, body.archive-mode #btnUpdate, body.archive-mode #btnNouvelleTache { opacity: 0.4; pointer-events: none; filter: grayscale(0.5); } body.archive-mode [contenteditable="true"] { pointer-events: none; background: rgba(148, 163, 184, 0.05) !important; color: var(--text-muted); } body.archive-mode input.payment-date, body.archive-mode input.payment-montant { pointer-events: none; opacity: 0.6; } /* ====================== MODAL Paramètres de l'année ====================== */ .year-config-fieldset { border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; } .year-config-fieldset legend { padding: 0 8px; font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); } .year-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .year-config-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); } .year-config-grid input { background: rgba(var(--panel), 0.6); border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 10px; color: var(--text-body); font-family: inherit; font-size: 13px; } .year-config-grid input:focus { outline: none; border-color: var(--primary); } .year-config-table { width: 100%; border-collapse: collapse; font-size: 12px; } .year-config-table th, .year-config-table td { padding: 6px 8px; text-align: left; border-bottom: 1px dashed rgba(148, 163, 184, 0.12); } .year-config-table th { font-family: var(--font-heading); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } .year-config-table input { width: 100%; background: rgba(var(--panel), 0.6); border: 1px solid var(--border-soft); border-radius: 4px; padding: 4px 6px; color: var(--text-body); font-family: inherit; font-size: 12px; text-align: right; } .year-config-table .yc-plafond { text-align: right; font-variant-numeric: tabular-nums; color: var(--primary); } /* ====================== MENU DONNÉES (popover état + mise à jour) ====================== */ .data-menu { position: relative; } .data-menu .data-menu-btn { padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; } .data-menu .data-menu-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 6px currentColor; } .data-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 320px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 60; } .data-menu-dropdown .dmd-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; } .data-menu-dropdown .dmd-label { font-family: var(--font-heading); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); } .data-menu-dropdown .dmd-value { font-family: var(--font-heading); font-size: 13px; color: var(--text-body); } .data-menu-dropdown .dmd-separator { height: 1px; background: var(--border-soft); margin: 6px 0 10px; } .data-menu-dropdown .dmd-update { width: 100%; justify-content: center; } /* ====================== MENU OUTILS (dropdown 4 actions utilitaires) ====================== */ .tools-menu { position: relative; } .tools-menu .tools-caret { color: var(--text-muted); font-size: 10px; } .tools-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 60; display: flex; flex-direction: column; gap: 2px; } .tools-menu-item { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 10px 12px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.5px; color: var(--text-body); cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s; } .tools-menu-item:hover { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.25); color: var(--primary); } /* Menus déroulants de barre d'outils (regroupement d'actions, ex. Cartes Trello : « Template ▾ » / « Ligne ▾ »). Réutilise le style .tools-menu-dropdown, mais ancré à GAUCHE du bouton (une barre d'outils se lit de gauche à droite) et masqué par défaut ([hidden]) puisque le panneau vit en dur dans le HTML. */ .row-actions-menu { position: relative; display: inline-block; } .row-actions-menu .row-menu-btn .tools-caret { margin-left: 2px; } .row-actions-menu .tools-menu-dropdown { left: 0; right: auto; min-width: 220px; } .row-actions-menu .tools-menu-dropdown[hidden] { display: none; } /* Item destructif (Supprimer) : signalé en rouge, comme .btn-danger. */ .tools-menu-item.danger { color: #fca5a5; } .tools-menu-item.danger:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); color: #fecaca; } /* ====================== MENU UTILISATEUR (compte — mode API) ====================== Dropdown accroché à la pastille « 👤 Prénom Nom ▾ » du bandeau d'onglets : Mes emails / Administration (selon droits) / Déconnexion. Les items réutilisent .tools-menu-item pour rester homogènes avec les menus Outils et Données. */ .session-user .session-caret { color: var(--text-muted); font-size: 10px; margin-left: 2px; } .user-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 250px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 60; display: flex; flex-direction: column; gap: 2px; } .user-menu-dropdown .umd-header { padding: 8px 12px 6px; } .user-menu-dropdown .umd-name { font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-body); } .user-menu-dropdown .umd-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .user-menu-dropdown .umd-separator { height: 1px; background: var(--border-soft); margin: 4px 2px; } /* Items du menu compte : icône SVG « trait » + libellé sur une même ligne. Le SVG hérite de la couleur du texte (currentColor) : il suit donc le survol cyan des items et le survol rouge de Déconnexion. */ .user-menu-dropdown .tools-menu-item { display: flex; align-items: center; gap: 10px; } /* ---- Nouveautés : pastille de non-lu + fiches du panneau ------------------ */ /* Compteur dans l'item de menu : c'est LUI qui fait découvrir le panneau (sans repère visuel, une entrée de menu de plus resterait invisible — le défaut du numéro de version). `margin-left:auto` le pousse à droite de l'item. */ .user-menu-dropdown .nv-badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #06202a; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; flex: none; } /* Point sur la pastille du compte : visible SANS ouvrir le menu. */ .session-chip .nv-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px rgba(var(--panel), 0.9); pointer-events: none; } .session-chip { position: relative; } .nv-list { display: flex; flex-direction: column; gap: 10px; } .nv-card { border: 1px solid var(--border-soft); border-left: 3px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; background: rgba(var(--panel), 0.35); } /* Fiche non lue : liseré d'accent à gauche — repérable en balayant la liste. */ .nv-card.nv-neuf { border-left-color: var(--primary); } .nv-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .nv-titre { font-weight: 700; color: var(--text); font-size: 14px; } .nv-pastille { background: var(--primary); color: #06202a; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 8px; text-transform: uppercase; } /* Texte des pastilles : sombre sur le cyan clair du thème sombre, blanc sur le bleu plus soutenu du thème clair — sinon l'un des deux passe sous le seuil AA. */ /* En clair, le blanc sur --primary ne donnait que 4,1:1 (mesuré) : sous le seuil AA de 4,5 pour ce petit texte. On fonce le fond -> 5,6:1. */ :root[data-theme="light"] .user-menu-dropdown .nv-badge, :root[data-theme="light"] .nv-pastille { color: #fff; background: var(--primary-dark); } .nv-date { margin-left: auto; color: var(--text-caption); font-size: 11px; } .nv-card p { margin: 4px 0; font-size: 13px; line-height: 1.45; color: var(--text-body); } .nv-card .nv-pourquoi strong, .nv-card .nv-ou strong { color: var(--text); margin-right: 4px; } .nv-card .nv-ou { color: var(--text-muted); } /* « M'y emmener » (lot 2) : discret au repos, franc au survol — la fiche reste lisible d'abord, l'action est là pour qui veut essayer tout de suite. */ .nv-actions { margin-top: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Renvoi au guide (lot 3) : lien DISCRET à côté de l'action, pour ne pas la concurrencer — « M'y emmener » fait essayer, le guide fait comprendre. */ .nv-guide { color: var(--text-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; } .nv-guide:hover { color: var(--primary); } :root[data-theme="light"] .nv-guide:hover { color: var(--primary-dark); } .nv-go { background: transparent; border: 1px solid var(--primary); color: var(--primary); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nv-go:hover { background: var(--primary); color: #06202a; } /* En clair, --primary sur le fond de la fenêtre ne donne que 4,1:1 (mesuré) : sous le seuil AA de 4,5 pour ce texte de 12 px. Teinte foncée -> 5,6:1. */ :root[data-theme="light"] .nv-go { color: var(--primary-dark); border-color: var(--primary-dark); } :root[data-theme="light"] .nv-go:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; } @media (max-width: 640px) { .nv-date { margin-left: 0; } .nv-card { padding: 9px 10px; } } .user-menu-dropdown .umd-ico { width: 16px; height: 16px; flex: none; opacity: 0.8; } .user-menu-dropdown .tools-menu-item:hover .umd-ico { opacity: 1; } /* Déconnexion : survol en rouge pour signaler l'action « sortie » */ .user-menu-dropdown .umd-logout:hover { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); color: #ef4444; } /* ====================== MODALE « MES EMAILS » (charte, thèmes clair/sombre) ====================== Fenêtre des modèles .eml par commercial : variables de thème + composants .btn de la charte (plus aucun style « bricolé » inline ni input file natif). */ .ds-modal-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.78); /* pas de backdrop-filter : très coûteux au rendu (captures/PC modestes) */ z-index: 200000; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 40px 16px; } .ds-modal { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 14px; width: 720px; max-width: 100%; color: var(--text-body); font-family: var(--font-body); box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.10); /* Tenir dans la fenêtre : en-tête (et pied éventuel) fixes, corps défilant — pour les modales plus hautes que l'écran (ex. « Envoi auto des Prévisions » avec la liste des statuts). Repli : l'overlay reste `overflow:auto`. */ display: flex; flex-direction: column; max-height: calc(100vh - 80px); /* 80px = padding vertical de .ds-modal-overlay */ } .ds-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); flex: 0 0 auto; /* en-tête fixe quand le corps défile */ } .ds-modal-head h2 { margin: 0; font-size: 17px; color: var(--primary); font-family: var(--font-heading); letter-spacing: 0.3px; } .ds-modal-close { background: none; border: none; color: var(--text-muted); font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 6px; cursor: pointer; transition: color 0.15s, background 0.15s; } .ds-modal-close:hover { color: var(--danger); background: rgba(239, 68, 68, 0.10); } .ds-modal-body { padding: 18px 22px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .ds-modal-intro { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.6; } /* Variantes de largeur + sous-modale empilée (éditeur de permissions) */ .ds-modal--wide { width: 880px; } .ds-modal--mid { width: 620px; } /* Administration : tableau large (Rôle, Équipe, Pastille…) — on exploite la largeur de l'écran pour éviter le défilement horizontal, tout en gardant une marge sur les grands moniteurs. max-width:100% (.ds-modal) borne sur mobile. */ .ds-modal--xwide { width: min(1240px, 94vw); } .ds-overlay-top { z-index: 200001; } /* Thème clair : voile doux (le voile noir uniforme donnait l'impression de rester en sombre) */ :root[data-theme="light"] .ds-modal-overlay { background: rgba(71, 85, 105, 0.38); } /* Briques communes des modales chartées (Administration, éditeur de rôles…) */ .ds-section-title { font-family: var(--font-heading); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--primary); margin: 0 0 10px; } .ds-sep { border: none; border-top: 1px solid var(--border-soft); margin: 20px 0; } .ds-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; } .ds-field { font-size: 11px; color: var(--text-muted); } .ds-input { width: 100%; padding: 7px 9px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 6px; color: var(--text); box-sizing: border-box; font-size: 13px; margin-top: 3px; font-family: var(--font-body); } .ds-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--glow-soft); } .ds-msg { font-size: 12px; margin-top: 10px; min-height: 16px; } /* ====================== FICHIERS DES OFFRES (modale 📎, mode API) ====================== Pièces jointes d'une offre : zone de glisser-déposer + tableau des fichiers. La modale réutilise .ds-modal ; le bouton 📎 de la colonne réutilise .journal-btn. */ .files-ico { width: 14px; height: 14px; vertical-align: -2px; } .ofm-drop { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; border: 2px dashed var(--border-soft); border-radius: 10px; padding: 16px; margin-bottom: 14px; color: var(--text-muted); font-size: 13px; transition: border-color 0.15s, background 0.15s; } .ofm-drop--over { border-color: var(--primary); background: rgba(56, 189, 248, 0.08); } .ofm-drop .ofm-hint { flex-basis: 100%; text-align: center; font-size: 11px; opacity: 0.8; } .ofm-ro-tag { font-size: 12px; font-weight: 400; opacity: 0.65; margin-left: 6px; } .ofm-table td { padding: 6px 4px; } .ofm-table .ofm-nom { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofm-table .ofm-meta { color: var(--text-muted); white-space: nowrap; } .ofm-table .ofm-par { max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .ofm-table .ofm-actions { text-align: right; white-space: nowrap; } .ofm-table .ofm-actions .btn { padding: 4px 10px; font-size: 12px; } .ofm-table .ofm-actions .ofm-del:hover { border-color: rgba(239, 68, 68, 0.5); color: #ef4444; } /* Bouton « Image de carte » : discret par défaut, mis en avant quand c'est la couverture. */ .ofm-table .ofm-actions .ofm-cover.is-cover { border-color: var(--primary); color: var(--primary); } .ofm-table tr.ofm-cover-row .ofm-nom { color: var(--primary); } .ofm-trash { margin-top: 12px; } .ofm-trash summary { cursor: pointer; color: var(--text-muted); font-size: 12px; } .ofm-trash-row { opacity: 0.7; } /* Pied de fenêtre : bouton « Valider » (fermeture explicite ; désactivé pendant un téléversement pour signaler qu'il n'est pas terminé). */ .ofm-foot { display: flex; justify-content: flex-end; padding: 12px 22px 16px; border-top: 1px solid var(--border-soft); } .ofm-foot .btn:disabled { opacity: 0.6; cursor: wait; } /* Filet de sécurité : une table à nombreuses colonnes (ex. Admin Utilisateurs) défile horizontalement dans sa modale au lieu de déborder du cadre. */ .ds-table-scroll { overflow-x: auto; } .ds-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ds-table thead tr { color: var(--text-muted); font-size: 11px; text-transform: uppercase; text-align: left; } .ds-table thead th { padding: 6px; font-weight: 600; } .ds-table tbody tr { border-top: 1px solid var(--border-soft); } .ds-table tbody tr:hover { background: rgba(56, 189, 248, 0.05); } .ds-table td { padding: 7px 6px; } /* Archives Pipeline (lecture seule) — même look que le Pipeline : les nombreuses colonnes ne doivent PAS s'enrouler. `white-space: nowrap` garde les EN-TÊTES sur une seule ligne et dimensionne chaque colonne à son contenu ; le débordement horizontal défile dans le .table-wrapper (overflow:auto). En-tête figé au défilement. */ .ds-table-archives { table-layout: auto; } .ds-table-archives th, .ds-table-archives td { white-space: nowrap; vertical-align: middle; } .ds-table-archives thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-surface); } .ds-table-archives .arch-cell { pointer-events: none; } /* Colonnes de texte libre (Matériel, Message, Commentaire) : bornées + troncature « … » pour ne pas étirer démesurément le tableau (le texte complet reste consultable en réactivant l'affaire dans le Pipeline). */ .ds-table-archives .arch-cell--wide, .ds-table-archives .arch-cell--wide .cell-edit-text { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-badge { font-size: 10px; color: var(--primary); border: 1px solid var(--border); border-radius: 8px; padding: 1px 6px; } .ds-caption { color: var(--text-caption); font-size: 11px; } .ds-muted { color: var(--text-muted); } .ds-dirty { margin-right: auto; font-size: 12px; font-weight: 700; color: var(--warning); display: none; } /* Carte par bouton d'envoi (slot) */ .myeml-slot { border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 16px 16px; margin-bottom: 14px; background: rgba(var(--panel), 0.45); } .myeml-slot-title { font-family: var(--font-heading); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--primary); margin: 0 0 6px; } .myeml-tokens { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; line-height: 2; } .token-chip { background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 6px; color: var(--primary); font-size: 11.5px; } .myeml-list { font-size: 13px; color: var(--text-body); } .myeml-empty { color: var(--text-muted); font-size: 12.5px; } .myeml-table { width: 100%; border-collapse: collapse; font-size: 13px; } .myeml-table tr { border-top: 1px solid var(--border-soft); } .myeml-table tr:hover { background: rgba(56, 189, 248, 0.05); } .myeml-table td { padding: 7px 6px; } .myeml-row-tokens { font-size: 11px; color: var(--text-caption); } .myeml-note { font-size: 11px; color: var(--text-caption); margin: 6px 0 0; } .myeml-import-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .myeml-msg { font-size: 12px; margin-top: 8px; min-height: 16px; } /* Boutons compacts (lignes de tableau) + état désactivé charté */ .btn-mini { padding: 4px 9px; font-size: 12.5px; } .btn-mini + .btn-mini { margin-left: 4px; } .btn-danger-ghost:hover { border-color: var(--danger); color: var(--danger); background: rgba(239, 68, 68, 0.10); } /* État désactivé : surface neutre EXPLICITE (pas une simple opacité, qui rendait les boutons primaires quasi invisibles sur fond sombre). Lisible dans les 2 thèmes, et le passage désactivé -> actif (cyan) devient évident. */ .btn:disabled, .btn:disabled:hover { background: var(--bg-elevation); border: 1px solid var(--border); color: var(--text-muted); cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.8; } /* ====================== SÉLECTEUR DE FICHIER CHARTÉ ====================== Remplace l'input file natif (« Choisir un fichier ») : l'input reste dans le DOM (masqué) pour que le code lisant .files fonctionne tel quel ; on affiche un bouton charté + le nom du fichier choisi. */ .file-pick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; } .file-pick input[type="file"] { display: none; } .file-pick-btn { white-space: nowrap; } .file-pick-name { font-size: 12px; color: var(--text-caption); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .file-pick-name.has-file { color: var(--text-body); font-style: normal; font-weight: 600; } /* ====================== SÉLECTEUR DE LANGUE (drapeaux) ====================== */ .lang-selector { position: relative; display: inline-flex; } .flag-ico { width: 22px; height: 15px; border-radius: 2px; display: inline-block; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); flex: 0 0 auto; } .lang-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 9px; cursor: pointer; line-height: 1; } .lang-btn:hover { border-color: rgba(56, 189, 248, 0.4); } .lang-btn .lang-caret { color: var(--text-muted); font-size: 10px; } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 60; display: flex; flex-direction: column; gap: 2px; } .lang-menu.hidden { display: none; } .lang-opt { display: flex; align-items: center; gap: 9px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; font-family: var(--font-heading); font-size: 13px; color: var(--text-body); cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s; } .lang-opt:hover { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.25); color: var(--primary); } .lang-opt.active { background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.35); } .lang-opt-label { white-space: nowrap; } /* ====================== TABLEAU DE BORD (Analyses pluri-annuelles) ====================== */ .analyses-control { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: rgba(var(--panel), 0.85); border: 1px solid var(--border-soft); border-radius: 12px; margin-bottom: 22px; position: sticky; top: 124px; z-index: 47; backdrop-filter: blur(8px); } .analyses-control .ac-left, .analyses-control .ac-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .analyses-control .ac-title { font-family: var(--font-heading); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; } .analyses-year-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(var(--panel), 0.5); border: 1px solid var(--border-soft); border-radius: 6px; cursor: pointer; font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.5px; transition: border-color 0.15s; } .analyses-year-check:has(input:checked) { border-color: var(--yc); box-shadow: 0 0 0 1px var(--yc) inset; } .analyses-year-check input { accent-color: var(--yc); } .analyses-year-check .ayc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .analyses-year-check .ayc-label { font-weight: 700; color: var(--text-body); } .analyses-control .ac-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 12px; color: var(--text-body); cursor: pointer; } .analyses-control .ac-toggle em { color: var(--text-muted); font-style: normal; font-size: 10px; } .analyses-section { margin-bottom: 28px; } .analyses-section-title { font-family: var(--font-heading); font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--primary); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .analyses-empty { color: var(--text-muted); font-size: 13px; padding: 30px; text-align: center; background: rgba(var(--panel), 0.4); border: 1px dashed var(--border-soft); border-radius: 8px; } /* Cartes d'année — Section Vue d'ensemble */ .analyses-yearcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .year-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; } .year-card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; } .year-card-year { font-family: var(--font-heading); font-size: 22px; font-weight: 800; letter-spacing: 1px; } .year-card-badge { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; padding: 3px 7px; border-radius: 3px; } .year-card-body { padding: 12px 16px; } .ycb-row { display: flex; justify-content: space-between; padding: 5px 0; font-family: var(--font-heading); font-size: 13px; } .ycb-row.ycb-prime { padding-left: 12px; font-size: 12px; color: var(--text-muted); } .ycb-row.ycb-total { padding: 8px 12px; margin: 6px -8px 0; border-radius: 6px; font-size: 14px; } .ycb-label { color: var(--text-muted); } .ycb-val { color: var(--text-body); font-variant-numeric: tabular-nums; } .ycb-sep { height: 1px; background: var(--border-soft); margin: 8px 0; } /* Grille générique pour les sections Évolution / Répartition / Primes */ .analyses-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; } .chart-card.chart-card-wide { grid-column: 1 / -1; } /* Section Revendeurs (Tableau de bord) : tuile compacte (largeur bornée) +