/* Auto-flotte — feuille de styles personnalisée (complète Tailwind via CDN — voir des pages HTML) */ /* ===== Sélection multi-lignes réutilisable (FP.bulkSelect) ===== */ .fp-bulk-selall { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: #5A6577; cursor: pointer; margin-bottom: .6rem; width: max-content; user-select: none; } .fp-bulk-selall input { width: 15px; height: 15px; accent-color: #F97316; cursor: pointer; margin: 0; } .fp-bulk-total { color: #94a3b8; } .fp-bulkbar { display: none; align-items: center; gap: .6rem; padding: .55rem .85rem; border-radius: .65rem; background: #0B1220; color: #fff; margin-bottom: .75rem; flex-wrap: wrap; } .fp-bulkbar.active { display: flex; } .fp-bulkbar-count { font-size: .85rem; font-weight: 600; margin-right: auto; } .fp-bulk-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .fp-bulk-btn:hover { background: rgba(255,255,255,.18); } .fp-bulk-btn.danger { background: #EF4444; border-color: #EF4444; } .fp-bulk-btn.danger:hover { background: #dc2626; } .fp-bulk-cb { width: 15px; height: 15px; accent-color: #F97316; cursor: pointer; vertical-align: middle; margin-right: .4rem; } .fp-table tbody tr.row-selected td { background: rgba(249,115,22,.06); } .card.row-selected { box-shadow: 0 0 0 2px rgba(249,115,22,.55); } /* ===== Pop « nouveauté » (feature discovery) — FP.featureTip (classe fp-nf pour NE PAS entrer en collision avec l'infobulle .fp-tip du site, cf. plus bas) ===== */ .fp-nf { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 9996; width: 300px; max-width: calc(100vw - 2rem); background: #fff; border: 1px solid var(--fp-border); border-left: 4px solid var(--fp-accent); border-radius: 12px; box-shadow: 0 16px 40px -14px rgba(15,30,61,.35); padding: .85rem 1rem; animation: fp-pop-in .2s ease; } .fp-nf-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; color: var(--fp-primary); font-size: .92rem; margin-bottom: .35rem; } .fp-nf-x { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: .9rem; } .fp-nf-body { font-size: .82rem; color: #475569; line-height: 1.45; } .fp-nf-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .7rem; } .fp-nf-never { background: none; border: none; color: #94a3b8; font-size: .78rem; cursor: pointer; } .fp-nf-ok { background: var(--fp-accent); color: #fff; border: none; border-radius: 8px; padding: .35rem .7rem; font-size: .8rem; font-weight: 700; cursor: pointer; } @media print { .fp-nf { display: none !important; } } /* ===== Bouton « ← Retour » (haut de page) — FP.injectBackButton ===== */ .fp-back { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 1rem; padding: .4rem .8rem; border: 1px solid var(--fp-border); border-radius: 9999px; background: #fff; color: var(--fp-muted); font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: var(--fp-shadow-sm, 0 1px 2px rgba(15,30,61,.05)); } .fp-back:hover { border-color: var(--fp-accent); color: var(--fp-primary); } @media print { .fp-back { display: none !important; } } /* Sur mobile : « Retour » TOUJOURS accessible → pastille flottante en bas à gauche (au-dessus de la barre d'onglets), pour ne plus avoir à remonter tout en haut. (Sur ordinateur : reste en haut de page.) */ @media (max-width: 768px) { .fp-back { position: fixed; left: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 41; margin: 0; background: var(--fp-surface); color: var(--fp-accent); font-weight: 700; border: 1px solid var(--fp-border); box-shadow: 0 8px 20px -6px rgba(15,30,61,.4); padding: .55rem .95rem; } body.fp-dark .fp-back { background: var(--fp-surface); } } /* ===== Modals génériques (raccourcis dashboard, etc.) ===== */ .sc-ov { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(15,30,61,.5); align-items: center; justify-content: center; padding: 1rem; } .sc-ov.open { display: flex; } .sc-card { background: #fff; border-radius: 16px; padding: 1.3rem 1.4rem; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); } .sc-x { background: none; border: none; font-size: 1.3rem; line-height: 1; color: #94a3b8; cursor: pointer; } .sc-menu-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .8rem; text-align: left; background: none; border: none; cursor: pointer; color: #334155; font-size: .85rem; text-decoration: none; } .sc-menu-item:hover { background: #f1f5f9; } .sc-menu-item svg { width: 16px; height: 16px; color: var(--fp-accent); flex-shrink: 0; } /* ===== Contacts cliquables (tel/email + copier) — FP.contactChips ===== */ .fp-contact-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; } .fp-contact-chip { display: inline-flex; align-items: center; gap: .3rem; background: #f1f5f9; color: #334155; padding: .2rem .55rem; border-radius: 9999px; font-size: .8rem; font-weight: 600; text-decoration: none; } .fp-contact-chip:hover { background: #e2e8f0; } .fp-contact-copy { background: none; border: none; color: #94a3b8; cursor: pointer; padding: .15rem; display: inline-flex; } .fp-contact-copy:hover { color: var(--fp-accent); } /* ===== Bouton « + » flottant (quick-add) — FP.injectQuickAdd ===== */ #fp-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 9997; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; } .fp-fab-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--fp-accent); color: #fff; border: none; box-shadow: 0 10px 28px -8px rgba(249,115,22,.6); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .18s; } .fp-fab-btn:hover { transform: scale(1.06); } #fp-fab.open .fp-fab-btn { transform: rotate(45deg); } .fp-fab-btn svg { width: 26px; height: 26px; } .fp-fab-menu { display: none; flex-direction: column; gap: .4rem; } #fp-fab.open .fp-fab-menu { display: flex; animation: fp-pop-in .16s ease; } .fp-fab-item { display: inline-flex; align-items: center; gap: .5rem; background: #0F1E3D; color: #fff; padding: .55rem .85rem; border-radius: 9999px; font-size: .85rem; font-weight: 600; text-decoration: none; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); white-space: nowrap; } .fp-fab-item:hover { background: #16305c; } .fp-fab-item svg { width: 16px; height: 16px; color: var(--fp-accent); } @media print { #fp-fab { display: none !important; } } /* ===== Tour guidé (1re visite) — FP.injectTour ===== */ #fp-tour { position: fixed; inset: 0; z-index: 10000; background: rgba(15,30,61,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; } .fp-tour-card { background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 1.5rem 1.5rem 1.1rem; box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); position: relative; animation: fp-pop-in .2s ease; } .fp-tour-skip { position: absolute; top: .6rem; right: .75rem; background: none; border: none; font-size: 1.15rem; line-height: 1; color: #94a3b8; cursor: pointer; } .fp-tour-title { font-size: 1.2rem; font-weight: 800; color: var(--fp-primary); margin-bottom: .5rem; padding-right: 1.2rem; } .fp-tour-desc { font-size: .92rem; color: #475569; line-height: 1.5; min-height: 3.4em; } .fp-tour-dots { display: flex; gap: .3rem; justify-content: center; margin: 1rem 0; } .fp-tour-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; } .fp-tour-dot.on { background: var(--fp-accent); } .fp-tour-actions { display: flex; align-items: center; gap: .5rem; } .fp-tour-never { font-size: .78rem; color: #64748b; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; } .fp-tour-btn { padding: .45rem .9rem; border-radius: 9px; border: 1px solid var(--fp-border); background: #fff; font-weight: 600; font-size: .85rem; cursor: pointer; } .fp-tour-btn.primary { background: var(--fp-accent); color: #fff; border-color: var(--fp-accent); } @keyframes fp-pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== Vue mobile « en cartes » (grands tableaux → cartes) — FP.mobileCardify ===== */ @media (max-width: 640px) { .scrollable table.fp-table, .scrollable table.fp-table tbody, .scrollable table.fp-table tr, .scrollable table.fp-table td { display: block; width: 100%; } .scrollable table.fp-table thead { display: none; } /* MODE COMPACT MOBILE (mobile UNIQUEMENT — le desktop n'est pas concerné) : cartes plus denses → plus de véhicules/lignes par écran, moins de scroll. */ /* Carte = surface qui SUIT le thème (avant : #fff figé → cartes blanches en mode sombre). */ .scrollable table.fp-table tr { margin: 0 0 .55rem; border: 1px solid var(--fp-border); border-radius: .85rem; padding: .35rem .15rem; background: var(--fp-surface); box-shadow: 0 2px 10px rgba(15,30,61,.06); overflow: hidden; } .scrollable table.fp-table td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .34rem .85rem; border: none !important; text-align: right; font-size: .86rem; line-height: 1.3; color: var(--fp-text); } .scrollable table.fp-table td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--fp-faint); text-align: left; flex: 0 0 auto; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; } /* 1re cellule = identifiant principal → mise en avant (titre de la carte). */ .scrollable table.fp-table td:first-child { font-weight: 800; font-size: 1rem; padding-top: .5rem; padding-bottom: .32rem; } .scrollable table.fp-table td:first-child[data-label]::before { align-self: center; } /* La valeur peut REVENIR À LA LIGNE (fini les descriptions/noms coupés « … » / débordant à droite dans les cartes). ⚠️ Il FAUT rétablir white-space:normal : la règle de base .fp-table td met white-space:nowrap (pour le tableau desktop), ce qui EMPÊCHAIT le retour à la ligne dans les cartes → le fournisseur/la description débordaient hors de l'écran. */ .scrollable table.fp-table td { overflow-wrap: anywhere; word-break: break-word; white-space: normal; min-width: 0; } .scrollable table.fp-table td > * { white-space: normal; min-width: 0; overflow-wrap: anywhere; } .scrollable table.fp-table td[data-label]::before { flex: 0 0 auto; max-width: 45%; overflow-wrap: anywhere; white-space: normal; } } /* Fiche conducteur : n'afficher qu'UNE icône par titre de section (l'emoji 3D) — l'icône lucide redondante juste à côté est masquée (fini les « doubles icônes »). */ .fiche-title .fp-emoji ~ svg, .fiche-title .fp-emoji ~ i[data-lucide], .cc-title .fp-emoji ~ svg, .cc-title .fp-emoji ~ i[data-lucide] { display: none !important; } /* Suivi des relevés km : sur petit écran, la pastille de statut colorée (« À jour »…) suffit → on masque le petit point vert qui se superposait, et on remet la grille sur 2 colonnes propres. */ @media (max-width: 560px) { .rk-main { grid-template-columns: 1fr auto !important; } .rk-dot { display: none !important; } .rk-idcol { grid-column: 1; } .rk-pill { grid-column: 2; justify-self: end; } .rk-chauf, .rk-km, .rk-last { grid-column: 1 / 3 !important; } .rk-actions { grid-column: 1 / 3; justify-self: start; } } :root { /* Direction « cockpit » : ardoise-nuit pour la structure, orange marque en accent, neutres gris-bleu FROIDS (choisis, pas gris pur) et chiffres en monospace tabulaire. */ --fp-primary: #0B1220; /* ardoise-nuit — barre latérale, titres, boutons sombres (le "cockpit") */ --fp-primary-2: #060B16; --fp-cockpit-2: #10203c; /* dégradé haut du cockpit */ --fp-accent: #F97316; /* orange — couleur d'accent de la marque Parc Pilot */ --fp-accent-2: #FB923C; --fp-data: #0EA5E9; /* cyan données (sparklines, accents secondaires) */ --fp-warn: #F59E0B; --fp-danger: #EF4444; --fp-ok: #10B981; --fp-bg: #EEF1F6; /* gris-bleu froid (biais léger vers l'accent) */ --fp-surface: #FFFFFF; --fp-border: #E3E8F0; --fp-text: #111A2B; --fp-muted: #5A6577; --fp-faint: #667085; --fp-shadow-sm: 0 1px 2px rgba(16,26,45,.05), 0 2px 6px -3px rgba(16,26,45,.10); --fp-shadow: 0 1px 2px rgba(16,26,45,.06), 0 4px 10px -4px rgba(16,26,45,.08), 0 18px 44px -20px rgba(16,26,45,.20); --fp-shadow-lg: 0 28px 64px -28px rgba(16,26,45,.34); --fp-ease: cubic-bezier(.22,.61,.36,1); /* courbe douce commune aux transitions */ --fp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Identité « cockpit » (même pâte que l'accueil et la connexion) : --fp-title = police d'affichage des titres/gros chiffres ; --fp-label = télémétrie (petits libellés MAJ). */ --fp-title: 'Space Grotesk', 'Inter', system-ui, sans-serif; --fp-label: 'Space Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Couleurs par groupe de véhicules (configurables via Paramètres) */ --grp-siege: #F59E0B; --grp-commerciaux: #CA8A04; --grp-gov: #10B981; --grp-pool: #84CC16; --grp-a-vendre: #DC2626; --grp-retail: #8B5CF6; --grp-depot: #3B82F6; --grp-non-classe: #94A3B8; } /* Dots et pills par groupe — utilisent les variables CSS pour permettre l'override via Paramètres */ .dot-siege, .gp-siege .dot { background: var(--grp-siege); } .dot-commerciaux, .gp-commerciaux .dot { background: var(--grp-commerciaux); } .dot-gov, .gp-gov .dot { background: var(--grp-gov); } .dot-pool, .gp-pool .dot { background: var(--grp-pool); } .dot-a-vendre, .gp-a-vendre .dot { background: var(--grp-a-vendre); } .dot-retail, .gp-retail .dot { background: var(--grp-retail); } .dot-depot, .gp-depot .dot { background: var(--grp-depot); } .dot-non-classe, .gp-non-classe .dot { background: var(--grp-non-classe); } .groupe-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; background: #F1F5F9; color: var(--fp-text); } .groupe-pill .dot { width: 8px; height: 8px; border-radius: 50%; } /* Fond défini sur html (et pas seulement via des classes Tailwind sur le wrapper) : ainsi, pendant le bref instant de chargement d'une page, l'écran montre le fond clair de l'appli au lieu du BLANC par défaut du navigateur (cause du "flash blanc"). */ html { scroll-behavior: smooth; font-size: 16px; background: var(--fp-bg); } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--fp-text); background: var(--fp-bg); } /* === Adaptation au zoom navigateur === À zoom < 100% (typiquement 75%), le viewport CSS effectif s'agrandit. On compense par une typographie qui grossit aux très larges viewports (pour rester lisible). Le main des pages app reste en pleine largeur. */ @media (min-width: 1900px) { html { font-size: 17px; } } @media (min-width: 2300px) { html { font-size: 18px; } } @media (min-width: 2800px) { html { font-size: 19px; } } /* --- Gradients & accents communs --- */ .fp-gradient-hero { background: radial-gradient(60% 80% at 20% 0%, rgba(94,234,212,0.18) 0%, transparent 70%), radial-gradient(50% 70% at 90% 10%, rgba(30,58,138,0.22) 0%, transparent 70%), linear-gradient(180deg, #0F1E3D 0%, #142B58 100%); color: white; } .fp-gradient-cta { background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-2) 60%, var(--fp-accent) 130%); } .fp-text-accent { color: var(--fp-accent); } .fp-bg-accent { background-color: var(--fp-accent); } /* --- Boutons --- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: .625rem; font-weight: 600; transition: all .15s ease; } .btn-primary { background: var(--fp-accent); color: var(--fp-primary); } .btn-primary:hover { background: var(--fp-accent-2); transform: translateY(-1px); box-shadow: 0 10px 25px -10px rgba(249,115,22,.5); } .btn-ghost { border: 1px solid rgba(255,255,255,.25); color: white; } .btn-ghost:hover { background: rgba(255,255,255,.08); } .btn-dark { background: var(--fp-primary); color: white; } .btn-dark:hover { background: var(--fp-primary-2); } .btn-outline { border: 1px solid var(--fp-border); color: var(--fp-text); background: white; } .btn-outline:hover { background: var(--fp-bg); } /* --- Badges --- */ .badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 9999px; font-size: .7rem; font-weight: 700; letter-spacing: .01em; } /* Point lumineux qui « pulse » pour les statuts à surveiller (entretien, sinistre, hors service) */ .badge-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: middle; animation: fp-pulse 1.3s ease-in-out infinite; } @keyframes fp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .5; } } /* Survol : léger relief sur les cartes et KPI (cohérent avec les icônes 3D) */ .kpi { transition: transform .18s var(--fp-ease), box-shadow .18s var(--fp-ease); } @media (hover: hover) and (pointer: fine) { .kpi:hover { transform: translateY(-3px); box-shadow: var(--fp-shadow-lg); } } .card { transition: box-shadow .18s var(--fp-ease); } .card:hover { box-shadow: var(--fp-shadow-lg); } @media (prefers-reduced-motion: reduce) { .badge-dot { animation: none; } .kpi:hover { transform: none; } } /* === Icônes KPI : tuile aplatie (tinte discrète de la couleur) — style "cockpit" === */ .kpi-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .18s ease; background: color-mix(in srgb, var(--fp-data) 12%, var(--fp-surface)); border: 1px solid color-mix(in srgb, var(--fp-data) 24%, transparent); color: var(--fp-data); } .kpi-ic svg { width: 21px; height: 21px; stroke-width: 2.2; } .kpi:hover .kpi-ic { transform: translateY(-2px); } .kpi-ic.warn { background: color-mix(in srgb, var(--fp-warn) 14%, var(--fp-surface)); border-color: color-mix(in srgb, var(--fp-warn) 26%, transparent); color: #B45309; } .kpi-ic.danger { background: color-mix(in srgb, var(--fp-danger) 13%, var(--fp-surface)); border-color: color-mix(in srgb, var(--fp-danger) 26%, transparent); color: #B91C1C; } .kpi-ic.ok { background: color-mix(in srgb, var(--fp-ok) 14%, var(--fp-surface)); border-color: color-mix(in srgb, var(--fp-ok) 26%, transparent); color: #15803D; } .kpi-ic.violet { background: color-mix(in srgb, #8B5CF6 14%, var(--fp-surface)); border-color: color-mix(in srgb, #8B5CF6 26%, transparent); color: #6D28D9; } /* === En-tête : fin bandeau dégradé en haut de la zone de contenu (#10) === */ main.flex-1 { position: relative; } main.flex-1::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #F97316, #FB923C, #FCD34D); z-index: 1; } /* === État vide illustré (#9) === */ .fp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 1rem; color: #94a3b8; } .fp-empty .fp-empty-ic { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: .8rem; color: #94a3b8; background: linear-gradient(145deg, #fff, #eef2f7); border: 1px solid var(--fp-border); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 8px 18px -10px rgba(15,30,61,.3); } .fp-empty .fp-empty-ic svg { width: 28px; height: 28px; } .fp-empty .fp-empty-title { font-weight: 700; color: #475569; } .badge-ok { background: color-mix(in srgb, var(--fp-ok) 14%, transparent); color: #15803D; } .badge-warn { background: color-mix(in srgb, var(--fp-warn) 17%, transparent); color: #B45309; } .badge-danger { background: color-mix(in srgb, var(--fp-danger) 14%, transparent); color: #B91C1C; } .badge-info { background: color-mix(in srgb, var(--fp-data) 14%, transparent); color: #0369A1; } /* Mode sombre — pastilles d'icônes KPI + badges colorés : le fond s'assombrit (color-mix avec la surface sombre) mais le GLYPHE/texte restait foncé → invisible sur fond foncé. On éclaircit. */ body.fp-dark .kpi-ic.warn { color: #fbbf24; } body.fp-dark .kpi-ic.danger { color: #f87171; } body.fp-dark .kpi-ic.ok { color: #34d399; } body.fp-dark .kpi-ic.violet { color: #a78bfa; } body.fp-dark .badge-ok { color: #34d399; } body.fp-dark .badge-warn { color: #fbbf24; } body.fp-dark .badge-danger { color: #f87171; } body.fp-dark .badge-info { color: #38bdf8; } /* ===== PASTILLE D'ÉCHÉANCE / STATUT — SOURCE UNIQUE (.fp-ech) ===================================== Composant canonique qui remplace progressivement les pastilles maison de chaque page (.pill-ech + .ech-*, .cat-pill, .pill-encours/avenir/rendu/retard, .badge-exp.*). MÊMES couleurs que le système .badge (fond color-mix + texte, variantes sombres) → cohérence sur toute la plateforme, clair ET sombre, réglées à UN seul endroit. Migration page par page (renouvellements en 1er). */ .fp-ech { display: inline-block; font-size: .72rem; font-weight: 700; padding: .14rem .6rem; border-radius: 9999px; white-space: nowrap; line-height: 1.35; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); } .fp-ech.danger { background: color-mix(in srgb, var(--fp-danger) 14%, transparent); color: #B91C1C; } .fp-ech.warn { background: color-mix(in srgb, var(--fp-warn) 17%, transparent); color: #B45309; } .fp-ech.info { background: color-mix(in srgb, var(--fp-data) 14%, transparent); color: #0369A1; } .fp-ech.ok { background: color-mix(in srgb, var(--fp-ok) 14%, transparent); color: #15803D; } .fp-ech.neutral { background: color-mix(in srgb, var(--fp-muted) 13%, transparent); color: var(--fp-muted); box-shadow: none; } body.fp-dark .fp-ech.danger { color: #f87171; } body.fp-dark .fp-ech.warn { color: #fbbf24; } body.fp-dark .fp-ech.info { color: #38bdf8; } body.fp-dark .fp-ech.ok { color: #34d399; } body.fp-dark .fp-ech.neutral { color: #cbd5e1; } /* ===== ÉDITEUR DE N° DE CARTE / BADGE EN PUCES (chips) — composant partagé (FP.badgeChipsHTML) ===== Utilisé à l'identique par la fiche véhicule, la fiche conducteur et Contrôle → Cartes & badges. */ .fp-badgechips { display: flex; flex-direction: column; gap: .45rem; min-width: 0; } .fp-bc-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .fp-badge-chip { display: inline-flex; align-items: center; gap: .4rem; background: color-mix(in srgb, var(--fp-accent) 14%, transparent); color: #9A3412; border: 1px solid color-mix(in srgb, var(--fp-accent) 32%, transparent); border-radius: 9999px; padding: .18rem .35rem .18rem .6rem; font-size: .78rem; font-weight: 700; font-family: ui-monospace, "SF Mono", monospace; letter-spacing: .01em; max-width: 100%; word-break: break-all; line-height: 1.2; } .fp-bc-x { border: none; background: none; cursor: pointer; color: currentColor; opacity: .55; font-size: .82rem; line-height: 1; padding: 0 1px; border-radius: 999px; } .fp-bc-x:hover { opacity: 1; color: var(--fp-danger); } .fp-bc-empty { color: var(--fp-faint); font-size: .82rem; } .fp-bc-add { display: flex; gap: .35rem; align-items: center; } .fp-bc-input { flex: 1; min-width: 0; border: 1px solid var(--fp-border); border-radius: 6px; padding: 3px 8px; font-size: .85rem; background: var(--fp-surface); color: var(--fp-text); } .fp-bc-input:focus { outline: none; border-color: var(--fp-accent); } .fp-bc-addbtn { border: 1px solid var(--fp-border); background: var(--fp-surface); color: var(--fp-primary); border-radius: 6px; padding: 3px 9px; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .fp-bc-addbtn:hover { background: color-mix(in srgb, var(--fp-accent) 12%, transparent); border-color: color-mix(in srgb, var(--fp-accent) 40%, transparent); } body.fp-dark .fp-badge-chip { color: #fdba74; } body.fp-dark .fp-bc-addbtn { color: #e6edf6; } /* Bouton « 📷 Prendre en photo » (mobile) — ajouté auto à chaque dépôt de document lu par l'IA. */ .fp-scancam-btn { display: inline-flex; align-items: center; gap: .4rem; margin: .5rem 0 .2rem; padding: .6rem 1rem; border: 1px solid color-mix(in srgb, var(--fp-accent) 40%, transparent); border-radius: .7rem; cursor: pointer; background: color-mix(in srgb, var(--fp-accent) 12%, transparent); color: #9A3412; font-weight: 700; font-size: .9rem; min-height: 44px; -webkit-tap-highlight-color: transparent; } .fp-scancam-btn:hover { background: color-mix(in srgb, var(--fp-accent) 18%, transparent); } .fp-scancam-btn:active { transform: scale(.98); } body.fp-dark .fp-scancam-btn { color: #fdba74; } /* Sur ordinateur (pointeur fin) le bouton n'est jamais injecté ; on le masque aussi par sécurité. */ @media (pointer: fine) { .fp-scancam-btn { display: none; } } /* Mode sombre — puces de filtres / segmenteurs INACTIFS : restaient blanches à texte gris (~3:1 illisible). On les assombrit comme .st-chip ; l'état .active garde son fond primaire + texte blanc. */ body.fp-dark .filter-chip:not(.active), body.fp-dark .sin-chip:not(.active), body.fp-dark .emp-chip:not(.active), body.fp-dark .cmp-tabbtn:not(.active), body.fp-dark .tfview-toggle button:not(.active) { background: #1e293b !important; color: #cbd5e1 !important; border-color: #334155 !important; } /* Mode sombre — textes rouges d'erreur (toasts « échec ») : gardés ROUGES mais éclaircis pour rester lisibles sur la surface sombre (sinon rouge foncé sur fond foncé ≈ 1,7:1). */ body.fp-dark [style*="color:#B91C1C" i], body.fp-dark [style*="color: #B91C1C" i], body.fp-dark [style*="color:#991B1B" i], body.fp-dark [style*="color: #991B1B" i], body.fp-dark [style*="color:#DC2626" i], body.fp-dark [style*="color: #DC2626" i] { color: #fca5a5 !important; } /* --- Cards --- */ .card { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 1rem; box-shadow: var(--fp-shadow); } .card-hover { transition: transform .18s var(--fp-ease), box-shadow .18s var(--fp-ease); } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--fp-shadow-lg); } /* --- Tableaux --- */ .fp-table { width: 100%; border-collapse: collapse; } .fp-table th { text-align: left; font-family: var(--fp-label); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--fp-faint); padding: .65rem .85rem; border-bottom: 1px solid var(--fp-border); background: color-mix(in srgb, var(--fp-bg) 60%, var(--fp-surface)); white-space: nowrap; } .fp-table td { padding: .65rem .85rem; border-bottom: 1px solid var(--fp-border); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .fp-table tbody tr:hover { background: #F8FAFC; } /* Permettre le wrap explicite si une cellule en a besoin */ .fp-table td.wrap, .fp-table th.wrap { white-space: normal; } /* Liens cliquables plaque/conducteur (toute la plateforme) */ .fp-lien { color: var(--fp-accent); text-decoration: none; cursor: pointer; white-space: nowrap; } .fp-lien:hover { text-decoration: underline; } /* Densité COMPACTE (réglable dans Paramètres) : lignes plus serrées sur toutes les pages */ html.fp-compact .fp-table th { padding: .35rem .7rem; font-size: .68rem; } html.fp-compact .fp-table td { padding: .32rem .7rem; font-size: .8rem; } /* === Navigation fluide façon "app" (View Transitions) === Crossfade doux entre les pages au lieu du flash blanc/gris. La barre latérale, identique partout, garde un nom de transition stable → elle ne "clignote" pas (seul le contenu change). Géré nativement par le navigateur (Chrome/Edge) ; ignoré ailleurs (aucun effet négatif). */ /* Navigation sans flash blanc. La View-Transition GARDE l'ancienne page affichée jusqu'à ce que la nouvelle soit prête (pas de "trou" blanc pendant le chargement), MAIS on met l'échange en INSTANTANÉ (animation:none) → pas de fondu, donc pas de "passage par le blanc" (le fondu faisait apparaître le fond blanc au milieu de l'animation). Résultat : l'ancienne page reste, puis bascule net sur la nouvelle, sans blanc ni clignotement. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: none; } /* Glisser-déposer global de fichiers : surbrillance de la zone qui recevra le fichier (app.js) */ .fp-drop-hi { position: relative !important; outline: 2px dashed var(--fp-accent) !important; outline-offset: -3px; background-color: rgba(249,115,22,.07) !important; border-radius: 10px; transition: background-color .12s ease; } .fp-drop-hi::after { content: "⤓ Déposer le fichier ici"; position: absolute; z-index: 60; top: 8px; left: 50%; transform: translateX(-50%); background: var(--fp-accent); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 9999px; box-shadow: 0 6px 16px -6px rgba(249,115,22,.8); pointer-events: none; white-space: nowrap; } ::view-transition-new(root) { animation: none; } /* --- Sidebar dashboard (refonte « premium » : sombre, épuré, lumineux) --- Objectif : passer du look « pastilles 3D sur chaque icône » (skeuomorphe, un peu daté) à un cockpit MODERNE et calme façon Linear/Vercel : fond avec profondeur + fine séparation, icônes PLATES et légères, et un seul point fort = l'onglet ACTIF (puce teintée accent). Tout le reste reste discipliné. ⚠️ CSS uniquement — aucune classe/structure changée (renommage, glisser-déposer, sous-menus, mobile continuent de fonctionner). */ .fp-sidebar { width: 240px; background: linear-gradient(180deg, #0E1728 0%, #0B1220 58%); color: #fff; min-height: 100vh; border-right: 1px solid rgba(255,255,255,.06); } .fp-sidebar .fp-logo { display: block; padding-bottom: 1.05rem; margin-bottom: 1.15rem !important; border-bottom: 1px solid rgba(255,255,255,.07); } .fp-sidebar a { display: flex; align-items: center; gap: .7rem; padding: .56rem .78rem; border-radius: 10px; color: rgba(255,255,255,.64); font-size: .9rem; font-weight: 500; letter-spacing: .005em; transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; position: relative; will-change: transform; } /* Survol PREMIUM/tactile : la puce se « soulève » (dégradé + reflet haut + ombre portée) et l'onglet glisse légèrement vers la droite → sensation 3D/relief au passage de la souris. */ .fp-sidebar a:hover { background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045)); color: #fff; transform: translateX(3px); box-shadow: 0 8px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); } .fp-sidebar a:active { transform: translateX(3px) scale(.98); box-shadow: 0 3px 9px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); transition-duration: .08s; } .fp-sidebar a.active { background: rgba(249,115,22,.12); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--fp-accent); } /* L'onglet ACTIF réagit aussi au survol (relief accent + léger glissement) sans perdre son rail orange. */ .fp-sidebar a.active:hover { background: linear-gradient(180deg, rgba(249,115,22,.22), rgba(249,115,22,.12)); transform: translateX(3px); box-shadow: inset 2px 0 0 var(--fp-accent), 0 8px 18px -8px rgba(249,115,22,.5), inset 0 1px 0 rgba(255,255,255,.12); } @media (prefers-reduced-motion: reduce) { .fp-sidebar a, .fp-sidebar a:hover, .fp-sidebar a:active, .fp-sidebar a.active:hover { transform: none; } } /* Sidebar en colonne flex : le regroupement par sections se fait via `order` (CSS), pas en déplaçant les liens — ainsi un ré-ordonnancement du DOM ne peut jamais casser la répartition (titres « Espace de travail » / « Compte » toujours au bon endroit). */ .fp-sidebar nav { display: flex; flex-direction: column; gap: .12rem; } .fp-sidebar nav > * { margin-top: 0 !important; } /* neutralise l'espacement DOM (space-y-*) : ordre visuel ≠ ordre DOM */ /* Intitulés de section dans la sidebar (« Espace de travail » / « Compte ») — façon SaaS */ .fp-nav-group { font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.36); padding: .7rem 1rem .3rem; user-select: none; pointer-events: none; } /* Onglet privé « JIS » (CEO uniquement) : en-tête cliquable + sous-liens repliables. */ .fp-jis-group { display: flex; flex-direction: column; } .fp-jis-toggle { cursor: pointer; } .fp-jis-sub { margin: 1px 0 4px; padding-left: .35rem; border-left: 2px solid rgba(249,115,22,.35); margin-left: .55rem; } .fp-jis-sub a { font-size: .86rem; } /* Icônes de la barre latérale : petite pastille en relief (3D), façon tableau de bord. La taille (28px) est identique avant/après le remplacement -> par Lucide pour éviter tout décalage de la barre au chargement. */ /* Icônes de la barre latérale : PLATES et légères (plus de pastille 3D sur chaque item → look moderne). Le gabarit reste 28px (aucun décalage de barre au remplacement → par Lucide). Seule l'icône ACTIVE reçoit une touche de couleur (accent, fond teinté discret). */ .fp-sidebar nav a svg, .fp-sidebar nav a > i[data-lucide] { width: 28px; height: 28px; flex: 0 0 28px; box-sizing: border-box; padding: 3px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: none; box-shadow: none; color: rgba(255,255,255,.5); transition: background .18s ease, color .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1); } .fp-sidebar nav a:hover svg, .fp-sidebar nav a:hover > i[data-lucide] { color: #fff; transform: scale(1.12); } @media (prefers-reduced-motion: reduce) { .fp-sidebar nav a:hover svg, .fp-sidebar nav a:hover > i[data-lucide] { transform: none; } } /* Onglet actif : icône simplement en accent orange (plat, sans carré teinté → plus net et moderne) */ .fp-sidebar a.active svg, .fp-sidebar a.active > i[data-lucide] { color: var(--fp-accent); background: none; box-shadow: none; } .fp-sidebar .nav-label { flex: 1; min-width: 0; } /* === Sous-menus dépliants de la sidebar (Contrôle, Contrats, Factures, Suivi & alertes) === Cliquer l'onglet parent déplie/replie la liste ; cliquer un sous-onglet ouvre SA page. Style « Parc Pilot » : rail lumineux orange, items en léger relief, chevron animé. */ .fp-nav-chev { margin-left: auto; font-size: .62rem; line-height: 1; opacity: .55; transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s; flex: 0 0 auto; transform: rotate(0deg); } .fp-sidebar a.sub-open .fp-nav-chev { transform: rotate(90deg); opacity: 1; color: var(--fp-accent); } .fp-subnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s cubic-bezier(.4,0,.2,1); margin: 2px 0 4px .55rem; } .fp-subnav.open { grid-template-rows: 1fr; } /* Conteneur animé (0fr→1fr) : rail dégradé + léger fond en creux pour l'effet « tiroir 3D ». */ .fp-subnav-inner { min-height: 0; overflow: hidden; padding: 3px 0 3px .55rem; margin-left: .35rem; border-left: 2px solid transparent; border-image: linear-gradient(180deg, var(--fp-accent), rgba(249,115,22,.15)) 1; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0) 70%); border-radius: 0 .5rem .5rem 0; } .fp-subnav-item { position: relative; display: flex; align-items: center; gap: .5rem; padding: .4rem .7rem; margin: 2px .35rem 2px 0; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.68); text-decoration: none; border-radius: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .14s, color .14s, transform .14s, box-shadow .14s; } /* Puce ronde devant chaque sous-onglet (repère visuel discret). */ .fp-subnav-item::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.32); transition: background .14s, box-shadow .14s; } .fp-subnav-item:hover { background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); color: #fff; transform: translateX(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.22); } .fp-subnav-item:hover::before { background: var(--fp-accent); box-shadow: 0 0 6px rgba(249,115,22,.8); } .fp-subnav-item.active { background: linear-gradient(145deg, rgba(249,115,22,.30), rgba(249,115,22,.12)); color: #fff; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(249,115,22,.35); } .fp-subnav-item.active::before { background: var(--fp-accent); box-shadow: 0 0 8px rgba(249,115,22,.9); } /* === Recherche globale === */ .fp-global-search { position: relative; margin: 0 0 1rem 0; } .fp-search-input { width: 100%; padding: .62rem .8rem .62rem 2.35rem; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); border: 1px solid rgba(255,255,255,.14); border-radius: .7rem; color: #fff; font-size: .85rem; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .fp-search-input::placeholder { color: rgba(255,255,255,.5); font-weight: 500; } .fp-search-input:hover { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); border-color: rgba(255,255,255,.24); } .fp-search-input:focus { background: rgba(255,255,255,.14); border-color: var(--fp-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.28), inset 0 1px 0 rgba(255,255,255,.08); } /* La loupe (🔍) s'anime en orange quand le champ est actif */ .fp-global-search > div > span { transition: color .15s ease, transform .15s ease; } .fp-search-input:focus + span, .fp-global-search:focus-within > div > span { color: var(--fp-accent) !important; } .fp-search-results { display: none; position: absolute; top: calc(100% + .35rem); left: 0; right: 0; background: color-mix(in srgb, var(--fp-surface) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--fp-border); border-radius: .65rem; box-shadow: var(--fp-shadow-lg); max-height: 60vh; overflow-y: auto; z-index: 50; } .fp-search-results.open { display: block; } .fp-search-item { display: flex !important; align-items: flex-start; gap: .55rem; padding: .55rem .75rem !important; border-bottom: 1px solid var(--fp-border); color: var(--fp-text) !important; background: transparent !important; font-weight: 500; font-size: .82rem !important; border-radius: 0 !important; } .fp-search-item:hover, .fp-search-item.kbd-active { background: #F1F5F9 !important; } .fp-search-icon { font-size: .95rem; line-height: 1.2; flex-shrink: 0; } .fp-search-cat { padding: .3rem .75rem .15rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fp-muted); } .fp-search-text { display: flex; flex-direction: column; min-width: 0; } .fp-search-label { font-weight: 600; color: var(--fp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-search-sub { color: var(--fp-muted); font-size: .7rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-search-empty { padding: 1rem; text-align: center; color: var(--fp-muted); font-size: .85rem; } /* Autocomplete (champs Conducteur / Motif…) — remplace le natif */ .ac-wrap { position: relative; } /* Petite flèche pour indiquer qu'un menu déroulant est disponible sur le champ */ .ac-wrap::after { content: "▾"; position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--fp-muted); pointer-events: none; font-size: .85rem; } .ac-wrap > input, .ac-wrap > .field-input { padding-right: 1.8rem; } /* Zone cliquable transparente par-dessus la flèche ▾ pour dérouler/refermer la liste */ .ac-arrow { position: absolute; top: 0; right: 0; height: 100%; width: 2rem; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; z-index: 2; } .ac-panel { display: none; position: absolute; top: calc(100% + .25rem); left: 0; right: 0; background: color-mix(in srgb, var(--fp-surface) 85%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--fp-border); border-radius: .65rem; box-shadow: var(--fp-shadow-lg); max-height: 220px; overflow-y: auto; z-index: 60; padding: .25rem; } .ac-panel.open { display: block; } .ac-item { padding: .5rem .65rem; font-size: .85rem; font-weight: 500; color: var(--fp-text); border-radius: .4rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-item:hover, .ac-item.ac-active { background: #F1F5F9; } .ac-empty { padding: .6rem .65rem; font-size: .8rem; color: var(--fp-muted); } body.fp-dark .ac-item:hover, body.fp-dark .ac-item.ac-active { background: #2a3a52; } /* Bouton d'édition inline : ✎ visible au survol */ .nav-edit-btn { margin-left: auto; padding: .15rem .35rem; font-size: .85rem; line-height: 1; color: rgba(255,255,255,.55); opacity: 0; transition: opacity .12s, background .12s, color .12s; cursor: pointer; background: transparent; border: none; border-radius: .3rem; font-family: inherit; } .fp-sidebar a:hover .nav-edit-btn { opacity: 1; } .nav-edit-btn:hover { background: rgba(255,255,255,.15); color: white; } .fp-sidebar a.active .nav-edit-btn { color: rgba(255,255,255,.6); } .fp-sidebar a.active:hover .nav-edit-btn { color: white; } .fp-sidebar a.active .nav-edit-btn:hover { background: rgba(255,255,255,.18); } /* Réorganisation des onglets du menu par glisser-déposer */ .fp-sidebar a[draggable="true"] { cursor: grab; } .fp-sidebar a.nav-dragging { opacity: .4; } .fp-sidebar a.nav-drop-above { box-shadow: inset 0 3px 0 0 var(--fp-accent); } .fp-sidebar a.nav-drop-below { box-shadow: inset 0 -3px 0 0 var(--fp-accent); } /* Input d'édition inline */ .nav-label-input { flex: 1; min-width: 0; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); border-radius: .3rem; padding: .15rem .4rem; font-size: inherit; font-family: inherit; font-weight: inherit; color: white; outline: none; } .fp-sidebar a.active .nav-label-input { background: white; border-color: var(--fp-primary); color: var(--fp-primary); } .nav-label-input:focus { box-shadow: 0 0 0 2px rgba(249,115,22,.4); } /* Désactive le pointer sur le lien pendant l'édition */ .fp-sidebar a.editing { cursor: default; } /* === Textes éditables (titres / sous-titres) === */ [data-edit-key] { cursor: text; border-radius: 4px; transition: background .12s, outline-color .12s; outline: 1px dashed transparent; outline-offset: 4px; } [data-edit-key]:hover:not(.editing-text) { background: rgba(249,115,22,0.05); outline-color: rgba(249,115,22,0.4); } [data-edit-key].editing-text { outline: 2px solid var(--fp-accent); background: #fff; /* ⚠️ En édition, le fond passe en BLANC : forcer un texte SOMBRE, sinon les titres blancs des en-têtes sombres (cockpit) deviennent invisibles (blanc/blanc). */ color: #111A2B !important; -webkit-text-fill-color: #111A2B !important; caret-color: var(--fp-accent); cursor: text; min-width: 100px; padding: 0 .15rem; } [data-edit-key].editing-text * { color: #111A2B !important; -webkit-text-fill-color: #111A2B !important; } [data-edit-key].editing-text:focus { outline-color: var(--fp-accent); } /* --- Navigation mobile : menu latéral repliable (hamburger) --- */ .fp-mobile-bar { display: none; } .fp-sidebar-backdrop { display: none; } @media (max-width: 768px) { .fp-mobile-bar { display: flex; align-items: center; gap: .6rem; position: sticky; top: 0; z-index: 50; background: var(--fp-primary); color: #fff; padding: .55rem .8rem; padding-top: calc(.55rem + env(safe-area-inset-top)); } .fp-mobile-bar .fp-burger { background: rgba(255,255,255,.14); border: none; color: #fff; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .fp-mobile-bar .fp-burger svg { width: 22px; height: 22px; } /* Tiroir mobile en COLONNE flex + 100dvh (hauteur visible réelle, hors barre d'adresse). */ .fp-sidebar { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 260px; min-height: 0; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s ease; z-index: 60; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.35); } .fp-sidebar.fp-open { transform: translateX(0); } /* Le bouton Déconnexion reste TOUJOURS visible en bas du tiroir (collé), plus besoin de scroller. */ .fp-sidebar .fp-logout-wrap { margin-top: auto !important; position: sticky; bottom: 0; background: var(--fp-primary); padding-bottom: max(.6rem, env(safe-area-inset-bottom)); z-index: 2; } .fp-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; } .fp-sidebar-backdrop.fp-open { opacity: 1; pointer-events: auto; } } @media (min-width: 769px) { .fp-mobile-bar, .fp-sidebar-backdrop { display: none !important; } } /* === BARRE D'ONGLETS EN BAS (mode application) — mobile uniquement (≤768px) === 6 boutons : Accueil · Véhicules · ➕ · Amendes · Alertes · Menu. Le bouton ➕ est surélevé et ouvre la feuille d'ajout rapide. Masquée sur bureau (≥769px). */ .fp-tabbar { display: none; } .fp-qa-scrim, .fp-qa-sheet { display: none; } @media (max-width: 768px) { .fp-tabbar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; background: color-mix(in srgb, var(--fp-primary) 96%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid rgba(255,255,255,.10); padding: .4rem .1rem calc(.4rem + env(safe-area-inset-bottom)); } .fp-tab { min-width: 0; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(255,255,255,.66); font-size: .55rem; font-weight: 700; line-height: 1; padding: .3rem .03rem .15rem; text-decoration: none; border-radius: 12px; overflow: visible; } .fp-tab .fp-tab-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; } .fp-tab svg, .fp-tab i[data-lucide] { width: 21px; height: 21px; } .fp-tab svg { stroke-width: 2; } .fp-tab.active { color: #fff; } .fp-tab.active svg { color: var(--fp-accent); stroke: var(--fp-accent); } .fp-tab:active { background: rgba(255,255,255,.08); } /* Bouton central ➕ surélevé */ .fp-tab-add .fp-tab-plus { width: 52px; height: 52px; margin-top: -30px; border-radius: 50%; background: linear-gradient(135deg, var(--fp-accent), var(--fp-accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; border: 4px solid var(--fp-primary); box-shadow: 0 8px 20px -6px rgba(249,115,22,.7); } .fp-tab-add .fp-tab-plus svg, .fp-tab-add .fp-tab-plus i[data-lucide] { width: 26px; height: 26px; stroke-width: 2.4; } .fp-tab-add .fp-tab-lb { color: rgba(255,255,255,.66); margin-top: 1px; } .fp-tab-add:active .fp-tab-plus { transform: scale(.94); } /* Le contenu ne passe jamais SOUS la barre (clearance + safe-area). */ body.fp-tabbar-on { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } /* Le tiroir latéral et son bouton Déconnexion restent au-dessus de la barre. */ .fp-sidebar { z-index: 60; } /* Le bouton « + » flottant (bas-droite) fait DOUBLON avec le ➕ central de la barre → masqué là où la barre existe (mobile). Sur ordinateur, pas de barre → le FAB reste. */ body.fp-tabbar-on #fp-fab { display: none !important; } /* Les éléments flottants remontent au-dessus de la barre. */ #fp-totop { bottom: calc(70px + env(safe-area-inset-bottom)) !important; } .fp-nf { bottom: calc(70px + env(safe-area-inset-bottom)); } /* Feuille « Ajout rapide » (remonte du bas). */ .fp-qa-scrim { display: block; position: fixed; inset: 0; z-index: 61; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .2s; } .fp-qa-scrim.open { opacity: 1; pointer-events: auto; } .fp-qa-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 62; background: var(--fp-surface, #fff); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 34px rgba(15,23,42,.28); padding: .5rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .26s cubic-bezier(.22,1,.36,1); } .fp-qa-sheet.open { transform: translateY(0); } .fp-qa-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--fp-border, #e2e8f0); margin: .4rem auto .7rem; } .fp-qa-title { font-weight: 800; font-size: 1.02rem; margin: 0 .2rem .7rem; color: var(--fp-text, #0f172a); } .fp-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .fp-qa-item { display: flex; align-items: center; gap: .65rem; text-decoration: none; background: var(--fp-bg, #f1f5f9); border: 1px solid var(--fp-border, #e2e8f0); border-radius: 14px; padding: .8rem .75rem; font-weight: 700; font-size: .9rem; color: var(--fp-text, #0f172a); } .fp-qa-item:active { background: color-mix(in srgb, var(--fp-accent) 12%, transparent); } .fp-qa-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .fp-qa-ic svg, .fp-qa-ic i[data-lucide] { width: 20px; height: 20px; } .fp-qa-b { background: #e8f0ff; color: #2563eb; } .fp-qa-r { background: #fdeaea; color: #dc2626; } .fp-qa-g { background: #e7f6ec; color: #16a34a; } .fp-qa-o { background: #fdf1e0; color: #d97706; } } @media (min-width: 769px) { .fp-tabbar, .fp-qa-scrim, .fp-qa-sheet { display: none !important; } } /* ============================================================================ 📱 SÉCURITÉ GLOBALE DES FENÊTRES (MODALES) SUR MOBILE — source unique Toutes les fenêtres du site sont des overlays plein écran centrés (position:fixed; inset:0; …; justify-content:center) avec un panneau au centre. Problème récurrent sur iPhone : une fenêtre HAUTE passait sous la barre d'état (l'heure/l'encoche) et ses boutons se cachaient derrière la barre du bas. Correctif UNIQUE (aucune modif page par page) : sur mobile, le conteneur ne défile pas et réserve la safe-area haut/bas ; le PANNEAU (enfant direct) est plafonné à la hauteur visible et défile EN INTERNE → rien ne passe sous l'heure, les boutons restent visibles, et plus besoin de zoomer. On ne touche PAS au z-index (pas de régression d'empilement) ni au bureau (≥769px inchangé). Cible les 2 écritures inline (avec/sans espaces) du même motif. ========================================================================== */ @media (max-width: 768px) { div[style*="position: fixed"][style*="inset: 0"][style*="justify-content: center"], div[style*="position:fixed"][style*="inset:0"][style*="justify-content:center"] { overflow: hidden !important; padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important; } div[style*="position: fixed"][style*="inset: 0"][style*="justify-content: center"] > *, div[style*="position:fixed"][style*="inset:0"][style*="justify-content:center"] > * { max-height: 100% !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } } /* === RECHERCHE MOBILE — bouton loupe (barre du haut) + overlay plein écran === Réutilise la recherche globale existante (`.fp-global-search`), affichée en plein écran. */ .fp-mb-search { background: rgba(255,255,255,.14); border: none; color: #fff; width: 40px; height: 40px; border-radius: 10px; display: none; align-items: center; justify-content: center; cursor: pointer; flex: none; } .fp-mb-search svg, .fp-mb-search i[data-lucide] { width: 22px; height: 22px; } @media (max-width: 768px) { .fp-mb-search { display: inline-flex; } } .fp-msearch[hidden] { display: none !important; } .fp-msearch { position: fixed; inset: 0; z-index: 70; background: var(--fp-bg); display: flex; flex-direction: column; } .fp-msearch-bar { display: flex; align-items: center; gap: .5rem; padding: calc(.55rem + env(safe-area-inset-top)) .7rem .55rem; background: var(--fp-primary); } .fp-msearch-gs { flex: 1 1 auto; min-width: 0; position: relative; } .fp-msearch-ic { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); font-size: .9rem; opacity: .6; pointer-events: none; z-index: 1; } .fp-msearch .fp-search-input { width: 100%; min-width: 0; font-size: 16px; padding: .7rem .8rem .7rem 2.1rem; border-radius: 12px; border: 1px solid var(--fp-border); background: var(--fp-surface); color: var(--fp-text); } .fp-msearch .fp-search-input:focus { outline: none; border-color: var(--fp-accent); background: var(--fp-surface); box-shadow: 0 0 0 3px rgba(249,115,22,.18); } .fp-msearch .fp-search-input::placeholder { color: var(--fp-faint); } .fp-msearch-close { flex: 0 0 auto; background: rgba(255,255,255,.14); border: 0; color: #fff; font-weight: 700; font-size: .82rem; padding: .55rem .7rem; border-radius: 10px; cursor: pointer; } .fp-msearch .fp-search-results { position: static !important; display: block !important; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--fp-bg) !important; box-shadow: none !important; border: 0 !important; padding: .4rem .5rem calc(1rem + env(safe-area-inset-bottom)); margin: 0 !important; max-height: none !important; width: auto !important; } .fp-msearch .fp-search-item { border-radius: 12px; } .fp-msearch .fp-search-empty { padding: 1.6rem; text-align: center; color: var(--fp-faint); } /* === iOS : plus de ZOOM au focus des champs (police ≥16px sur mobile) === */ @media (max-width: 768px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .field-input, .fp-search-input { font-size: 16px; } } /* === Bordure de focus toujours à la marque (des champs de recherche étaient en turquoise) === */ [class*="border-teal-500"]:focus { border-color: var(--fp-accent) !important; } /* === Bulles KPI : jamais 3-4 colonnes serrées sur très petit écran (→ 2 colonnes) === */ @media (max-width: 560px) { .grid.grid-cols-3:has(> .kpi), .grid.grid-cols-4:has(> .kpi) { grid-template-columns: 1fr 1fr; } } /* === FILTRES EN FEUILLE DU BAS (mobile) — bouton « Filtres (N) » + feuille remontante === */ .fp-filters-trigger { display: none; } @media (max-width: 768px) { .fp-filters-trigger { display: inline-flex; align-items: center; gap: .45rem; width: 100%; justify-content: center; padding: .72rem 1rem; margin: 0 0 .7rem; border: 1px solid var(--fp-border); border-radius: 13px; background: var(--fp-surface); color: var(--fp-text); font-weight: 700; font-size: .92rem; cursor: pointer; box-shadow: 0 1px 3px rgba(15,30,61,.06); } .fp-filters-trigger.has-active { border-color: var(--fp-accent); color: var(--fp-accent); box-shadow: 0 2px 10px rgba(249,115,22,.18); } .fp-filters-trigger svg, .fp-filters-trigger i[data-lucide] { width: 18px; height: 18px; } .fp-filters-badge { background: var(--fp-accent); color: #fff; border-radius: 9999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; padding: 0 6px; } } .fp-fsheet-scrim { position: fixed; inset: 0; z-index: 64; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .2s; } .fp-fsheet-scrim.open { opacity: 1; pointer-events: auto; } .fp-fsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; margin: 0 auto; max-width: 560px; background: var(--fp-bg); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 34px rgba(15,23,42,.3); transform: translateY(110%); transition: transform .28s cubic-bezier(.22,1,.36,1); max-height: 85vh; display: flex; flex-direction: column; } .fp-fsheet.open { transform: translateY(0); } .fp-fsheet-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--fp-border); margin: .5rem auto .2rem; flex: none; } .fp-fsheet-head { display: flex; align-items: center; justify-content: space-between; padding: .3rem 1rem .6rem; font-weight: 800; font-size: 1.02rem; color: var(--fp-text); flex: none; border-bottom: 1px solid var(--fp-border); } .fp-fsheet-done { background: var(--fp-accent); color: #fff; border: 0; border-radius: 10px; padding: .5rem 1.1rem; font-weight: 700; font-size: .9rem; cursor: pointer; } .fp-fsheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .9rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .7rem; } /* La barre de filtres, DANS la feuille : dégrappée de sa carte, en pile pleine largeur. */ .fp-fsheet-body > * { width: 100% !important; max-width: 100% !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; display: flex !important; flex-wrap: wrap; gap: .55rem; align-items: center; } .fp-fsheet-body select, .fp-fsheet-body input:not([type=checkbox]):not([type=radio]) { width: 100%; flex: 1 1 100%; } .fp-fsheet-body .fp-filter-reset { margin-top: .2rem; } /* Empêche le scroll de l'arrière-plan quand une feuille de filtres est ouverte. */ body.fp-sheet-open { overflow: hidden; } /* === « Points à vérifier » RETIRÉ (consigne utilisateur) — l'onglet CONTRÔLE centralise déjà toutes les anomalies (source unique). On masque l'encart doublon de l'analyse Total Fleet (les seuils restent réglables dans Paramètres → Seuils d'alerte). L'entrée de menu « Points à vérifier » de Suivi & alertes est retirée côté JS (FP.NAV_SUBMENUS). */ #tf-analyse .card:has(#tf-an-anom) { display: none !important; } #tf-analyse .grid:has(.card #tf-an-anom) { grid-template-columns: 1fr; } /* === MENUS DÉROULANTS & DATES — style « Parc Pilot » cohérent (fini les pavés gris natifs iOS) === Avant : les ajoute .fp-dark à AVANT la 1re peinture (fond sombre + color-scheme:dark) → plus de « frame » clair qui apparaît puis passe en sombre lors d'une navigation. Le contenu, lui, est thémé via body.fp-dark (posé dès l'ouverture du body). */ html.fp-dark { background: #0b1220 !important; color-scheme: dark; } html.fp-dark body { background: #0b1220; } body.fp-dark { /* 🏎️ COCKPIT SOMBRE — surfaces bleu-nuit plus riches (au lieu du slate générique), hairlines subtiles. Tout est piloté par ces tokens → cartes/KPI/modales/champs suivent automatiquement. */ --fp-bg: #0b1220; --fp-surface: #131f38; --fp-border: #26344e; --fp-text: #e8eefa; --fp-muted: #94a3b8; /* Ombres plus profondes en sombre (les ombres claires sont invisibles sur fond nuit) */ --fp-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --fp-shadow: 0 2px 8px -3px rgba(0,0,0,.5), 0 16px 34px -18px rgba(0,0,0,.6); --fp-shadow-lg: 0 30px 66px -26px rgba(0,0,0,.72); background: #0b1220; color: var(--fp-text); } body.fp-dark.bg-slate-50 { background-color: #0b1220; } /* Aperçu de document intégré (FP.docFrame) : spinner de chargement bien visible tant que le PDF/l'image n'est pas affiché ; il disparaît au chargement (.loaded). Un lien « ouvrir dans un onglet » apparaît tout seul après ~15 s (si le document tarde) grâce à une animation CSS (aucun JS requis). */ .fp-docwrap { position: relative; width: 100%; border: 1px solid var(--fp-border); border-radius: .6rem; overflow: hidden; background: #fff; } .fp-docwrap > iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .fp-docspin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; background: #fff; color: var(--fp-muted); font-size: .85rem; font-weight: 600; z-index: 1; text-align: center; padding: 1rem; } .fp-docwrap.loaded .fp-docspin { display: none; } .fp-docspin-ic { width: 32px; height: 32px; border: 3px solid #E2E8F0; border-top-color: var(--fp-accent); border-radius: 50%; animation: fpspin .7s linear infinite; } @keyframes fpspin { to { transform: rotate(360deg); } } .fp-docspin-open { color: var(--fp-accent); font-weight: 700; text-decoration: underline; opacity: 0; pointer-events: none; animation: fpDocLate 0s linear 15s forwards; } @keyframes fpDocLate { to { opacity: 1; pointer-events: auto; } } body.fp-dark .fp-docwrap, body.fp-dark .fp-docwrap > iframe, body.fp-dark .fp-docspin { background: #0f1a2b; } /* Surfaces / cartes / champs */ body.fp-dark .bg-white { background-color: #1e293b !important; } /* Boutons à fond BLANC translucide (flèches préc./suiv. + fermer des fiches, posés sur un en-tête sombre) : le fond reste blanc (bg-white/90 n'est PAS assombri), mais en mode sombre l'icône héritait de la couleur CLAIRE du thème → icône blanche sur fond blanc = invisible. On force l'icône SOMBRE. */ body.fp-dark [class*="bg-white/90"], body.fp-dark [class*="bg-white/95"], body.fp-dark [class*="bg-white/80"], body.fp-dark [class*="bg-white/70"] { color: #0f172a !important; } body.fp-dark [class*="bg-white/90"] svg, body.fp-dark [class*="bg-white/95"] svg, body.fp-dark [class*="bg-white/80"] svg, body.fp-dark [class*="bg-white/70"] svg { color: #0f172a !important; stroke: currentColor !important; } body.fp-dark .card, body.fp-dark .sc-card, body.fp-dark .kpi, body.fp-dark .modal, body.fp-dark .drawer, body.fp-dark .btn-outline, body.fp-dark .cell-edit, body.fp-dark .res-row, body.fp-dark .ac-panel, body.fp-dark .fp-search-results, body.fp-dark .alert, body.fp-dark .notif { background-color: var(--fp-surface); color: var(--fp-text); } /* Raccourcis (dashboard) : menu déroulant + modales lisibles en sombre (fond sombre + texte clair, sinon texte sombre codé en dur sur carte blanche = illisible — cf. capture utilisateur). */ body.fp-dark .sc-menu-item { color: var(--fp-text) !important; } body.fp-dark .sc-menu-item[style*="color:#64748b"], body.fp-dark .sc-menu-item[style*="color: #64748b"] { color: var(--fp-muted) !important; } body.fp-dark .sc-menu-item:hover { background: rgba(255,255,255,.07) !important; } body.fp-dark .sc-card .hover\:bg-slate-50:hover { background: rgba(255,255,255,.06) !important; } body.fp-dark .sc-card .border-slate-200 { border-color: var(--fp-border) !important; } /* Autres surfaces claires codées en dur, sans variante sombre → texte clair sur fond blanc = illisible. Toasts (FP.toast), tour guidé, bouton retour, puces contact : thémés en sombre. */ body.fp-dark .fp-nf { background: var(--fp-surface); color: var(--fp-text); border-color: var(--fp-border); } body.fp-dark .fp-tour-card { background: var(--fp-surface); color: var(--fp-text); } body.fp-dark .fp-tour-btn { background: #1e293b; color: var(--fp-text); border-color: var(--fp-border); } body.fp-dark .fp-back { background: #1e293b; color: var(--fp-text); border-color: var(--fp-border); } body.fp-dark .fp-contact-chip { background: #1e293b; color: var(--fp-text); } body.fp-dark .btn-outline { border-color: var(--fp-border); } body.fp-dark input[type="text"], body.fp-dark input[type="date"], body.fp-dark input[type="time"], body.fp-dark input[type="number"], body.fp-dark input[type="email"], body.fp-dark input[type="search"], body.fp-dark input:not([type]), body.fp-dark textarea, body.fp-dark select, body.fp-dark .field-input { background-color: #0e1830 !important; color: var(--fp-text); border-color: var(--fp-border); } body.fp-dark input::placeholder, body.fp-dark textarea::placeholder { color: #7c8aa0; } /* Renommage de l'onglet ACTIF en mode sombre : la règle générique ci-dessus mettait un fond #1e293b tout en gardant un texte navy (var(--fp-primary)) → quasi invisible. On force fond blanc + texte navy pour que le nom saisi reste lisible. */ body.fp-dark .fp-sidebar a.active .nav-label-input { background: #fff !important; color: var(--fp-primary) !important; } /* Fonds clairs Tailwind */ body.fp-dark .bg-slate-50 { background-color: #0f1a2b !important; } body.fp-dark .bg-slate-100 { background-color: #243044 !important; } body.fp-dark .bg-slate-200 { background-color: #2d3a4f !important; } body.fp-dark .hover\:bg-slate-50:hover { background-color: #243044 !important; } body.fp-dark .hover\:bg-slate-100:hover { background-color: #2d3a4f !important; } /* Bordures */ body.fp-dark .border-slate-100, body.fp-dark .border-slate-200, body.fp-dark .border-slate-300 { border-color: #334155 !important; } /* Textes (gris neutres uniquement — les couleurs d'accent restent) */ body.fp-dark .text-slate-900 { color: #f1f5f9 !important; } body.fp-dark .text-slate-800 { color: #e2e8f0 !important; } body.fp-dark .text-slate-700 { color: #d4dde8 !important; } body.fp-dark .text-slate-600 { color: #c2cdda !important; } body.fp-dark .text-slate-500 { color: #9aa8bb !important; } body.fp-dark .text-slate-400 { color: #8493a6 !important; } /* Titres & chiffres en couleur primaire (styles inline) → illisibles en sombre, on les éclaircit */ body.fp-dark [style*="color: var(--fp-primary)"], body.fp-dark [style*="color:var(--fp-primary)"] { color: #e6edf6 !important; } /* Textes en couleur SOMBRE en style inline (titres/labels de modales, fiches, aperçus…) : sur une surface sombre ils étaient invisibles. On les éclaircit (miroir de la règle ci-dessus). Comme on assombrit aussi les fonds clairs inline, le contraste reste correct. Les pastilles à fond coloré (vert/ambre/rouge clair) gardent leur texte foncé car leur fond n'est PAS assombri. */ body.fp-dark [style*="color:#0f172a" i], body.fp-dark [style*="color: #0f172a" i], body.fp-dark [style*="color:#0f1e3d" i], body.fp-dark [style*="color: #0f1e3d" i], body.fp-dark [style*="color:#111a2b" i], body.fp-dark [style*="color: #111a2b" i], body.fp-dark [style*="color:#1e293b" i], body.fp-dark [style*="color: #1e293b" i], body.fp-dark [style*="color:#334155" i], body.fp-dark [style*="color: #334155" i], body.fp-dark [style*="color:#1e3a8a" i], body.fp-dark [style*="color: #1e3a8a" i], /* ⬇️ Navy/quasi-noir codés en dur (invisibles sur fond nuit — jamais sur pastille claire) : #0B1E3D (bouton « Comparer des devis »…), #0B1220 (primaire), #111827, #1e3d59, #0b2545, #0c1a33. */ body.fp-dark [style*="color:#0b1e3d" i], body.fp-dark [style*="color: #0b1e3d" i], body.fp-dark [style*="color:#0b1220" i], body.fp-dark [style*="color: #0b1220" i], body.fp-dark [style*="color:#111827" i], body.fp-dark [style*="color: #111827" i], body.fp-dark [style*="color:#0f2540" i], body.fp-dark [style*="color: #0f2540" i], body.fp-dark [style*="color:#1e3d59" i], body.fp-dark [style*="color: #1e3d59" i], body.fp-dark [style*="color:#0c1a33" i], body.fp-dark [style*="color: #0c1a33" i], body.fp-dark [style*="color:#0b2545" i], body.fp-dark [style*="color: #0b2545" i], body.fp-dark [style*="color:#0a0f1c" i], body.fp-dark [style*="color: #0a0f1c" i] { color: #e6edf6 !important; } body.fp-dark [style*="color:#64748b" i], body.fp-dark [style*="color: #64748b" i], body.fp-dark [style*="color:#475569" i], body.fp-dark [style*="color: #475569" i], body.fp-dark [style*="color:#94a3b8" i], body.fp-dark [style*="color: #94a3b8" i] { color: #aab6c6 !important; } /* Quelques textes foncés Tailwind résiduels */ body.fp-dark .text-slate-900\/90, body.fp-dark .text-black, body.fp-dark .text-gray-900, body.fp-dark .text-gray-800 { color: #f1f5f9 !important; } /* Tableaux */ body.fp-dark .fp-table th { background: #182234; color: var(--fp-muted); border-color: var(--fp-border); } body.fp-dark .fp-table td { border-color: var(--fp-border); } body.fp-dark .fp-table tbody tr:hover { background: #243044; } /* Petites pastilles à fond clair */ body.fp-dark .groupe-pill, body.fp-dark .plate-badge, body.fp-dark .stat-pill { background: #243044; color: var(--fp-text); } /* Menus déroulants créés en JS (FP.searchSelect / FP.conducteurPicker) : leur fond #fff est posé via style.cssText → sérialisé en rgb() par le navigateur, donc NON capté par la règle [style*="#fff"]. On les style par CLASSE. Survol + mode sombre lisibles (les noms étaient gris pâle sur blanc). */ .fp-jsmenu { color: var(--fp-text); } .fp-jsmenu .fp-ss-it, .fp-jsmenu .fp-cp-it { color: var(--fp-text); } .fp-jsmenu .fp-ss-it:hover, .fp-jsmenu .fp-cp-it:hover, .fp-jsmenu .fp-ss-it.kbd-active, .fp-jsmenu .fp-cp-it.kbd-active { background: #EEF2F7; } body.fp-dark .fp-jsmenu { background: #1e293b !important; border-color: #334155 !important; color: #e6edf6; } body.fp-dark .fp-jsmenu .fp-ss-it, body.fp-dark .fp-jsmenu .fp-cp-it { color: #e6edf6; } body.fp-dark .fp-jsmenu .fp-ss-it:hover, body.fp-dark .fp-jsmenu .fp-cp-it:hover, body.fp-dark .fp-jsmenu .fp-ss-it.kbd-active, body.fp-dark .fp-jsmenu .fp-cp-it.kbd-active { background: #243044; } /* ================================================================ MODE SOMBRE — surfaces personnalisées à fond CLAIR (cartes, cellules, panneaux propres à chaque page). Elles ne redéfinissent pas leur couleur de texte → en sombre le texte (clair) devenait invisible sur fond clair. On leur donne une surface sombre + texte clair, comme .card. (Audit lisibilité 2026-08) ================================================================ */ body.fp-dark .guide-hero { background: linear-gradient(180deg,#111a2b 0%,#0b1220 100%) !important; } body.fp-dark .quick-tile, body.fp-dark .stat-card, body.fp-dark .cal-cell, body.fp-dark .ech-row, body.fp-dark .pipeline-col, body.fp-dark .veh-card, body.fp-dark .task-card, body.fp-dark .driver-card, body.fp-dark .fiche-stat, body.fp-dark .fiche-card, body.fp-dark .viewer, body.fp-dark .hidden-cols-popover, body.fp-dark .grp-hidden-pop, body.fp-dark .ls-card, body.fp-dark #cmp-modal .cmp-card, body.fp-dark .drop, body.fp-dark .fld, body.fp-dark .drive-file, body.fp-dark .tf-ccard, body.fp-dark .fp-ac, body.fp-dark .es-card, body.fp-dark .es-doc { background: #1e293b !important; color: var(--fp-text); border-color: var(--fp-border); } body.fp-dark .cal-cell.muted { background: #172033 !important; } /* Cartes d'échéance CT (entretiens) : fonds clairs colorés → texte illisible en sombre. */ body.fp-dark .ct-card { background: #1e293b !important; color: var(--fp-text); } body.fp-dark .ct-card.danger { background: rgba(220,38,38,.20) !important; } body.fp-dark .ct-card.warn { background: rgba(217,119,6,.18) !important; } body.fp-dark .ct-card.ok { background: rgba(22,163,74,.18) !important; } body.fp-dark .fld.warn { background: rgba(217,119,6,.18) !important; } body.fp-dark .fld.low { background: rgba(220,38,38,.18) !important; } body.fp-dark .cmp-win { background: rgba(22,163,74,.22) !important; } body.fp-dark .pipeline-col .count { background: #243044 !important; } /* Textes en couleur primaire définis en STYLE-BLOCK (donc NON éclaircis par la règle inline plus haut) qui se retrouvent sur une surface sombre (cartes ci-dessus) ou sur le fond de page sombre → on les éclaircit. (On NE touche PAS .acc / .ctrl-kpi : leur carte reste claire → déjà lisibles.) */ body.fp-dark .section-title, body.fp-dark .guide-hero h1, body.fp-dark details.ctrl-help > summary, body.fp-dark .veh-card .price, body.fp-dark .ls-card .ls-immat, body.fp-dark .ls-card .ls-grid b, body.fp-dark .tf-ccard .nm, body.fp-dark .tf-ccard .tot, body.fp-dark .tf-ccard .foot b { color: var(--fp-text) !important; } /* Boîtes / bandeaux à fond clair posés en STYLE INLINE (souvent injectés par JS) : mêmes dégâts → on force une surface sombre. Le texte (hérité / text-slate / inline var(--fp-primary)) redevient clair, donc lisible. Ne cible QUE les fonds clairs connus (jamais une pastille à texte foncé). */ body.fp-dark [style*="background:#fff" i], body.fp-dark [style*="background: #fff" i], body.fp-dark [style*="background:white" i], body.fp-dark [style*="background: white" i], body.fp-dark [style*="background:#f8fafc" i], body.fp-dark [style*="background: #f8fafc" i], body.fp-dark [style*="background:#fbfcfe" i], body.fp-dark [style*="background: #fbfcfe" i], body.fp-dark [style*="background:#fffbeb" i], body.fp-dark [style*="background: #fffbeb" i], body.fp-dark [style*="background:#eff6ff" i], body.fp-dark [style*="background: #eff6ff" i], body.fp-dark [style*="background:#f0fdf4" i], body.fp-dark [style*="background: #f0fdf4" i], body.fp-dark [style*="background:#fef2f2" i], body.fp-dark [style*="background: #fef2f2" i], /* Gris neutres clairs très fréquents en style inline (états « en cours », pastilles, badges, boutons « Voir tout », champs verrouillés…). Ils N'étaient PAS captés → le texte (souvent #475569/#334155/#64748b, lui capté et éclairci) devenait CLAIR sur fond CLAIR = illisible. Vérifié : toutes leurs paires inline utilisent un texte déjà capté → assombrir est sûr. */ body.fp-dark [style*="background:#f1f5f9" i], body.fp-dark [style*="background: #f1f5f9" i], body.fp-dark [style*="background:#eef2f7" i], body.fp-dark [style*="background: #eef2f7" i], body.fp-dark [style*="background:#e2e8f0" i], body.fp-dark [style*="background: #e2e8f0" i], body.fp-dark [style*="background:#f9fafb" i], body.fp-dark [style*="background: #f9fafb" i], body.fp-dark [style*="background:#f5f5f5" i], body.fp-dark [style*="background: #f5f5f5" i], /* Fonds pastel oubliés (audit contraste) : leur TEXTE est déjà éclairci ailleurs → sans assombrir le fond on avait texte clair sur pastel clair = illisible. #ecfdf5 = pastille succès verte (scan/import OK) ; #fff7ed = orange (bouton « Sortie » conducteur, badges accidents, info relevés) ; #eef2ff = puces de plaque cliquables (Contrôle) ; #eef2f6 = chips collaborateurs (vue flotte). */ body.fp-dark [style*="background:#ecfdf5" i], body.fp-dark [style*="background: #ecfdf5" i], body.fp-dark [style*="background:#fff7ed" i], body.fp-dark [style*="background: #fff7ed" i], body.fp-dark [style*="background:#eef2ff" i], body.fp-dark [style*="background: #eef2ff" i], body.fp-dark [style*="background:#eef2f6" i], body.fp-dark [style*="background: #eef2f6" i] { background-color: #1e293b !important; } /* ═══ AUDIT MODE SOMBRE — petits éléments à FOND CLAIR défini par CLASSE (boutons, puces, aperçus). Les règles [style*=…] ci-dessus ne couvrent QUE les fonds inline ; ces classes échappaient donc au thème sombre → texte clair (var(--fp-muted)/var(--fp-text)) sur fond blanc = illisible. Correctif global (toutes pages) pour ne plus avoir à les traiter une par une. Les pastilles COLORÉES (danger/warn/ok) gardent leur fond clair volontairement (texte foncé lisible). ═══ */ body.fp-dark .widget-grip, body.fp-dark .chip, body.fp-dark .ra-btn, body.fp-dark .nav-eye, body.fp-dark .nav-move button, body.fp-dark .grp-hidden-chip { background: #1e293b !important; border-color: var(--fp-border) !important; } body.fp-dark .stat-pill:not(.danger):not(.warn):not(.ok) { background: #1e293b !important; } body.fp-dark .status-select { background: #0e1830 !important; color: var(--fp-text) !important; border-color: var(--fp-border) !important; } body.fp-dark .es-doc-prev, body.fp-dark .drive-file-preview { background: #0e1830 !important; } /* Composants partagés injectés en JS qui restaient CLAIRS en sombre (dialogues FP.confirm/prompt/ alert, menu d'export, pastille mémo) → surface sombre + texte clair, cohérents avec le thème. */ body.fp-dark .fp-dlg-card { background: #1e293b !important; color: var(--fp-text) !important; border-color: var(--fp-border) !important; } body.fp-dark .fp-dlg-card h3, body.fp-dark .fp-dlg-card .fp-dlg-title { color: var(--fp-text) !important; } body.fp-dark .fp-dlg-cancel { background: #243044 !important; color: var(--fp-text) !important; border-color: var(--fp-border) !important; } body.fp-dark .fp-dlg-input { background: #0f1728 !important; color: var(--fp-text) !important; border-color: var(--fp-border) !important; } body.fp-dark .fp-export-menu { background: #1e293b !important; color: var(--fp-text) !important; border-color: var(--fp-border) !important; } body.fp-dark .fp-export-menu button, body.fp-dark .fp-export-menu a { color: var(--fp-text) !important; } body.fp-dark .fp-export-menu button:hover, body.fp-dark .fp-export-menu a:hover { background: #243044 !important; } body.fp-dark .fp-memo-btn { background: #243044 !important; border-color: var(--fp-border) !important; } .tf-anom-row:hover { background: #f8fafc; } body.fp-dark .tf-anom-row:hover { background: #243044 !important; } /* Bouton bascule Clair / Sombre dans la sidebar (toujours sombre → texte clair dans les 2 thèmes) */ .fp-dark-toggle { display:flex; align-items:center; gap:.5rem; width:100%; margin:-.4rem 0 1rem; padding:.5rem .75rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:.55rem; color:rgba(255,255,255,.85); font-size:.82rem; font-weight:600; cursor:pointer; transition:background .12s, color .12s; } .fp-dark-toggle:hover { background:rgba(255,255,255,.14); color:#fff; } .fp-dark-toggle .fp-dt-ic { font-size:1rem; line-height:1; } .fp-dark-toggle:focus-visible { outline:2px solid var(--fp-accent); outline-offset:2px; } /* Textes colorés foncés sur fonds clairs DÉJÀ assombris (donc foncé-sur-foncé) : on éclaircit le texte, ciblé par conteneur pour ne pas casser les pastilles colorées ailleurs. */ body.fp-dark #onboard-welcome, body.fp-dark #onboard-welcome p, body.fp-dark #onboard-welcome li, body.fp-dark #onboard-welcome b { color: #cdddff !important; } body.fp-dark .assur-warnbox, body.fp-dark .assur-warnbox b { color: #fcd9a3 !important; } /* Aperçu Drive (iframe) et logos restent inchangés */ /* ================================================================ COMPOSANTS « COCKPIT » — réutilisables, branchés page par page (typo display italique, chips d'état, bandeau cockpit, plaque…) ================================================================ */ .fp-display { font-style: italic; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; } .fp-mono { font-family: var(--fp-mono); font-variant-numeric: tabular-nums; } .fp-eyebrow { font-family: var(--fp-label); font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--fp-faint); } /* Bandeau cockpit (héros de page) — CLAIR par défaut (fond blanc dégradé + léger halo orange), partagé par TOUTES les pages. Redevient sombre en mode nuit (plus bas). */ .fp-cockpit { background: radial-gradient(120% 130% at 92% -45%, rgba(249,115,22,.10), transparent 55%), linear-gradient(180deg, #FFFFFF 0%, #F3F6FB 100%); color: var(--fp-text); border: 1px solid var(--fp-border); border-radius: 20px; box-shadow: var(--fp-shadow); } .fp-cockpit .fp-eyebrow { color: var(--fp-accent); } /* Titre du bandeau cockpit = gros ITALIQUE lourd (écho du logo ParcPilot + des maquettes) */ .fp-cockpit h1 { font-family: var(--fp-title); font-style: normal; font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.04; color: var(--fp-primary) !important; } .fp-cockpit p { color: var(--fp-muted) !important; } .fp-cockpit .fp-mono, .fp-cockpit .fp-display { color: var(--fp-primary); } .fp-cockpit .btn-outline { background: var(--fp-surface); border-color: var(--fp-border); color: var(--fp-text); box-shadow: var(--fp-shadow-sm); } .fp-cockpit .btn-outline:hover { background: var(--fp-bg); border-color: var(--fp-faint); } .fp-cockpit .btn-outline svg { color: var(--fp-muted); } /* Mode nuit : le bandeau redevient sombre (cohérent avec le reste de l'app en sombre). */ body.fp-dark .fp-cockpit { background: radial-gradient(120% 130% at 88% -30%, rgba(249,115,22,.18), transparent 55%), linear-gradient(155deg, var(--fp-cockpit-2), var(--fp-primary) 64%); color: #EAF1FB; border-color: transparent; } body.fp-dark .fp-cockpit .fp-eyebrow { color: #8598B4; } body.fp-dark .fp-cockpit h1 { color: #fff !important; } body.fp-dark .fp-cockpit p { color: #C7D2E4 !important; } body.fp-dark .fp-cockpit .fp-mono, body.fp-dark .fp-cockpit .fp-display { color: #EAF1FB; } body.fp-dark .fp-cockpit .btn-outline { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #EAF1FB; box-shadow: none; } body.fp-dark .fp-cockpit .btn-outline:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.28); } body.fp-dark .fp-cockpit .btn-outline svg { color: #EAF1FB; } /* Chips d'état (couleur SÉMANTIQUE, distincte de l'accent orange) */ .fp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; padding: .25rem .6rem; border-radius: 999px; } .fp-chip.good { color: #15803D; background: color-mix(in srgb, var(--fp-ok) 15%, transparent); } .fp-chip.warn { color: #B45309; background: color-mix(in srgb, var(--fp-warn) 17%, transparent); } .fp-chip.bad { color: #B91C1C; background: color-mix(in srgb, var(--fp-danger) 15%, transparent); } .fp-chip.info { color: #0369A1; background: color-mix(in srgb, var(--fp-data) 15%, transparent); } .fp-chip.ghost{ color: #8598B4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } /* Plaque d'immatriculation française (signature de la fiche véhicule). Objet réel : reste blanc à texte noir dans les deux thèmes. */ .fp-plate { display: inline-flex; align-items: stretch; background: #fff; border: 2.5px solid #0b0b0b; border-radius: 8px; overflow: hidden; font-family: var(--fp-mono); vertical-align: middle; } .fp-plate .fp-plate-band { background: #1B48C4; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; line-height: 1.1; } .fp-plate .fp-plate-band .fp-plate-stars { font-size: 8px; color: #FFD24D; letter-spacing: -1px; } .fp-plate .fp-plate-band b { font-size: 11px; font-weight: 800; } .fp-plate .fp-plate-num { color: #0b0b0b; font-weight: 800; font-size: 1.2rem; letter-spacing: 2px; padding: 5px 12px; display: flex; align-items: center; } /* Chiffres "instrument" hors KPI (readouts de bandeau) — police marque Inter, alignés */ .fp-readout { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.5px; } /* Panneau de fiche (sections du corps en cartes, comme les panneaux de l'artefact) */ .fp-panel { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 1rem; padding: 1rem 1.15rem; box-shadow: var(--fp-shadow); } /* ================================================================ MODERNISATION 2026 — couche de finition GLOBALE (s'applique à toutes les pages ET toutes les sociétés) Polissage visuel : profondeur, micro-interactions, scrollbars, sélection, focus. Aucune classe Tailwind ajoutée → pas de rebuild. Respecte prefers-reduced-motion et la règle "pas d'anti-flash". ================================================================ */ /* Sélection de texte aux couleurs de la marque */ ::selection { background: color-mix(in srgb, var(--fp-accent) 26%, transparent); color: var(--fp-primary); } body.fp-dark ::selection { color: #fff; } /* Barres de défilement fines et discrètes (signature "app moderne") */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fp-faint) 55%, transparent) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fp-faint) 42%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--fp-muted) 60%, transparent); background-clip: padding-box; } /* KPI : léger dégradé de surface + filet d'accent qui s'allume au survol. ⚠️ PAS d'overflow:hidden sur .kpi — sinon on rogne les popovers/listes déroulantes qui débordent hors de la carte (ex. « X sans âge »). Le filet d'accent est donc encarté (left/right:16px) pour ne jamais dépasser sur les coins arrondis, sans avoir besoin de rogner la carte. */ .kpi { position: relative; background: linear-gradient(180deg, var(--fp-surface), color-mix(in srgb, var(--fp-bg) 45%, var(--fp-surface))); } .kpi::after { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--fp-accent), var(--fp-accent-2)); pointer-events: none; opacity: 0; transform: scaleX(.4); transform-origin: center; transition: opacity .2s var(--fp-ease), transform .2s var(--fp-ease); } /* Effets de survol UNIQUEMENT sur appareils à pointeur (souris) : sinon, sur mobile, le survol « colle » après un tap → le filet orange restait allumé (bug d'affichage signalé). */ @media (hover: hover) and (pointer: fine) { .kpi:hover::after { opacity: 1; transform: scaleX(1); } .kpi:hover { box-shadow: var(--fp-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--fp-accent) 20%, transparent); } } /* Cartes & panneaux : bordure qui se teinte au survol (finition premium) */ .card, .fp-panel { transition: box-shadow .2s var(--fp-ease), transform .2s var(--fp-ease), border-color .2s var(--fp-ease); } .card:hover, .fp-panel:hover { border-color: color-mix(in srgb, var(--fp-accent) 22%, var(--fp-border)); } /* Boutons : retour visuel à l'appui (scale-feedback) + relief plus riche sur le primaire */ .btn { transition: background .15s var(--fp-ease), box-shadow .15s var(--fp-ease), transform .1s var(--fp-ease), border-color .15s var(--fp-ease); } .btn:active { transform: translateY(1px) scale(.985); } .btn-primary { box-shadow: 0 1px 2px rgba(249,115,22,.22), 0 8px 20px -10px rgba(249,115,22,.5); } .btn-primary:active { box-shadow: 0 1px 2px rgba(249,115,22,.3); } /* Lignes de tableau : survol teinté accent (chaud, moderne) — clair uniquement, le mode sombre garde son propre survol défini plus haut */ body:not(.fp-dark) .fp-table tbody tr { transition: background .12s var(--fp-ease); } body:not(.fp-dark) .fp-table tbody tr:hover { background: color-mix(in srgb, var(--fp-accent) 6%, var(--fp-surface)); } /* Champ de saisie standard « .field-input » — base Parc Pilot (bordé, arrondi) COHÉRENTE PARTOUT. ⚠️ Sans cette base, la remise à zéro Tailwind laisse les .field-input SANS bordure → rendu « plat » (bug corrigé : fenêtres d'édition qui paraissaient non stylées). Le focus/dark sont gérés ci-dessous. */ .field-input { border: 1px solid var(--fp-border); border-radius: .6rem; padding: .5rem .7rem; font-size: .9rem; background: #fff; color: var(--fp-primary, #0F1E3D); line-height: 1.3; transition: border-color .12s, box-shadow .12s; } /* Champs de saisie : halo d'accent doux au focus (cohérent partout) */ input:not(.fp-search-input):not(.nav-label-input):focus, textarea:focus, select:focus, .field-input:focus { border-color: var(--fp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-accent) 14%, transparent); outline: none; } /* Chips & pastilles : contour interne net pour mieux ressortir sur les surfaces claires */ .fp-chip, .badge { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); } .fp-chip.ghost { box-shadow: none; } /* Coupe le relief au survol si l'utilisateur préfère moins d'animations */ @media (prefers-reduced-motion: reduce) { .kpi:hover::after { transition: none; } .btn:active { transform: none; } .card-hover:hover, .kpi:hover { transform: none; } } /* ================================================================ PAGE D'ACCUEIL (index.html) — vitrine "site moderne" Hero aurora, révélation au défilement, compteurs, étapes. Motif "Real-Time / Operations Landing" + style Aurora, aux couleurs de la marque (cockpit sombre + orange). Global. ================================================================ */ /* --- Barre de nav vitrine : ombre douce quand on défile --- */ .lp-nav { transition: box-shadow .25s var(--fp-ease), background .25s var(--fp-ease); } .lp-nav.is-scrolled { box-shadow: 0 8px 30px -16px rgba(11,18,32,.35); background: rgba(255,255,255,.9); } body.fp-dark .lp-nav.is-scrolled { background: rgba(15,23,42,.85); } /* --- Héros aurora (sombre, halos orange/cyan/violet animés lentement) --- */ .lp-hero { position: relative; overflow: hidden; background: var(--fp-primary); color: #EAF1FB; isolation: isolate; } .lp-hero::before { content: ''; position: absolute; inset: -45% -15% auto -15%; height: 150%; z-index: -2; background: radial-gradient(38% 56% at 18% 22%, rgba(249,115,22,.40), transparent 60%), radial-gradient(34% 50% at 80% 16%, rgba(14,165,233,.30), transparent 62%), radial-gradient(42% 60% at 62% 88%, rgba(139,92,246,.22), transparent 60%); filter: blur(24px) saturate(1.15); animation: lp-aurora 18s var(--fp-ease) infinite alternate; } .lp-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%); mask-image: linear-gradient(180deg, #000, transparent 78%); } @keyframes lp-aurora { 0% { transform: translate3d(-4%, -2%, 0) scale(1.02); } 100% { transform: translate3d(5%, 3%, 0) scale(1.09); } } .lp-hero .eyebrow { color: var(--fp-accent-2); } .lp-hero h1 { font-style: italic; font-weight: 900; letter-spacing: -.025em; } /* Pastille "en direct" (point qui pulse) */ .lp-live { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #EAF1FB; } .lp-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fp-ok); box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: lp-ping 1.6s ease-out infinite; } @keyframes lp-ping { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 70%,100% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } } /* --- Bande de statistiques (compteurs) --- */ .lp-stat-num { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 900; font-style: italic; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fp-text); } .lp-stat-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fp-faint); margin-top: .5rem; } /* --- Tuile d'icône vitrine (dégradé accent) --- */ .lp-ic { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--fp-accent-2), var(--fp-accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -12px rgba(249,115,22,.7); } .lp-ic svg { width: 24px; height: 24px; stroke-width: 2.2; } .lp-ic.slate { background: linear-gradient(145deg, #24344f, var(--fp-primary)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px -12px rgba(11,18,32,.7); } /* --- Étapes "Comment ça marche" (connectées par un trait) --- */ .lp-step { position: relative; } .lp-step-num { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-style: italic; font-size: 1.05rem; background: color-mix(in srgb, var(--fp-accent) 14%, var(--fp-surface)); color: var(--fp-accent); border: 1px solid color-mix(in srgb, var(--fp-accent) 26%, transparent); } /* --- Révélation au défilement (n'agit que si JS + mouvement autorisé ; sinon le contenu reste visible par défaut → aucun risque de "trou") --- */ .reveal-on .reveal { opacity: 0; transform: translateY(18px); } .reveal-on .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--fp-ease), transform .6s var(--fp-ease); } .reveal-on .reveal.d1 { transition-delay: .08s; } .reveal-on .reveal.d2 { transition-delay: .16s; } .reveal-on .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .lp-hero::before { animation: none; } .lp-live .dot { animation: none; } } /* ================================================================ COCKPIT — composants signature de la page d'accueil (cluster d'instruments du héros, jauge radiale, bento, comparatif Sans/Avec, FAQ, bande de confiance). Tout en CSS/SVG, autonome. ================================================================ */ /* Titre de section : gros italique de marque + libellé "instrument" */ .lp-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fp-accent); } .lp-eyebrow::before { content:''; width:22px; height:2px; background:var(--fp-accent); border-radius:2px; } .lp-h2 { font-style:italic; font-weight:900; letter-spacing:-.025em; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.04; color:var(--fp-text); } .lp-sub { color:var(--fp-muted); font-size:1.02rem; } /* --- Cluster d'instruments (signature du héros) --- */ .lp-cluster { position:relative; border-radius:22px; overflow:hidden; padding:1.25rem; background: radial-gradient(120% 120% at 85% -20%, rgba(249,115,22,.16), transparent 55%), linear-gradient(160deg, #13233f, #0a1120 70%); border:1px solid rgba(255,255,255,.09); box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); } .lp-cluster .lp-panel-line { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size:100% 30px; pointer-events:none; } /* Balayage lumineux (radar) qui traverse le cluster */ .lp-sweep { position:absolute; left:0; right:0; height:45%; top:-45%; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(249,115,22,.14), transparent); animation:lp-scan 4.2s ease-in-out infinite; } @keyframes lp-scan { 0%{ transform:translateY(0); opacity:0 } 12%{ opacity:1 } 60%{ transform:translateY(360%); opacity:1 } 62%,100%{ opacity:0 } } /* Jauge radiale (santé de la flotte) — anneau conique animé au chargement */ @property --lp-pct { syntax:''; inherits:false; initial-value:0; } .lp-gauge { position:relative; width:158px; height:158px; border-radius:50%; --lp-pct:92; flex-shrink:0; background:conic-gradient(var(--fp-accent) calc(var(--lp-pct)*3.6deg), rgba(255,255,255,.09) 0); -webkit-mask:radial-gradient(farthest-side, #0000 66%, #000 67%); mask:radial-gradient(farthest-side, #0000 66%, #000 67%); filter:drop-shadow(0 0 14px rgba(249,115,22,.35)); animation:lp-fill 1.5s var(--fp-ease) both .2s; } @keyframes lp-fill { from{ --lp-pct:0 } } .lp-gauge-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; } .lp-gauge-val { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#EAF1FB; } .lp-gauge-val b { font-size:2rem; font-weight:900; font-style:italic; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; } .lp-gauge-val span { font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8598B4; margin-top:.3rem; } /* Petits afficheurs d'instrument */ .lp-readout { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.7rem .8rem; } .lp-readout .r-lbl { font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8598B4; } .lp-readout .r-val { font-size:1.35rem; font-weight:900; font-style:italic; color:#EAF1FB; font-variant-numeric:tabular-nums; line-height:1.1; margin-top:.15rem; } .lp-readout .r-val.accent { color:var(--fp-accent-2); } .lp-readout .r-val.ok { color:#34D399; } /* Mini-ticker d'alertes dans le cluster */ .lp-tick { display:flex; align-items:center; gap:.55rem; font-size:.78rem; color:#C7D2E4; padding:.5rem .7rem; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); } .lp-tick .d { width:7px; height:7px; border-radius:50%; flex-shrink:0; } /* --- Bande de confiance --- */ .lp-trust { color:var(--fp-faint); font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; } .lp-trust-logo { font-weight:900; font-style:italic; font-size:1.15rem; letter-spacing:-.02em; color:var(--fp-muted); opacity:.75; transition:opacity .2s, color .2s; } .lp-trust-logo:hover { opacity:1; color:var(--fp-text); } /* --- Comparatif Sans / Avec --- */ .lp-vs { border-radius:18px; padding:1.5rem 1.4rem; border:1px solid var(--fp-border); background:var(--fp-surface); } .lp-vs.bad { background:color-mix(in srgb, #64748B 6%, var(--fp-surface)); } .lp-vs.good { background: radial-gradient(120% 120% at 100% 0%, rgba(249,115,22,.10), transparent 60%), var(--fp-surface); border-color:color-mix(in srgb, var(--fp-accent) 30%, var(--fp-border)); box-shadow:var(--fp-shadow); } .lp-vs h3 { font-weight:900; font-style:italic; font-size:1.15rem; letter-spacing:-.01em; } .lp-vs ul { margin-top:1rem; display:flex; flex-direction:column; gap:.7rem; } .lp-vs li { display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:var(--fp-text); } .lp-vs li svg { width:18px; height:18px; flex-shrink:0; margin-top:.1rem; } .lp-vs.bad li { color:var(--fp-muted); } .lp-vs.bad li svg { color:#94A3B8; } .lp-vs.good li svg { color:var(--fp-ok); } /* --- Bento grid --- */ .lp-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:174px; gap:16px; } .lp-bento-item { position:relative; overflow:hidden; border-radius:20px; padding:1.15rem 1.2rem; background:var(--fp-surface); border:1px solid var(--fp-border); box-shadow:var(--fp-shadow); transition:transform .22s var(--fp-ease), box-shadow .22s var(--fp-ease), border-color .22s var(--fp-ease); } .lp-bento-item:hover { transform:translateY(-4px); box-shadow:var(--fp-shadow-lg); border-color:color-mix(in srgb, var(--fp-accent) 25%, var(--fp-border)); } .lp-bento-item h3 { font-weight:800; font-size:1.02rem; letter-spacing:-.01em; } .lp-bento-item p { font-size:.83rem; color:var(--fp-muted); margin-top:.3rem; } .lp-bento-item .b-ic { color:var(--fp-accent); margin-bottom:.6rem; } .lp-bento-item .b-ic svg { width:22px; height:22px; } .b-2col { grid-column:span 2; } .b-2row { grid-row:span 2; } /* Tuile sombre (accent cockpit) */ .lp-bento-item.dark { background:linear-gradient(160deg, #13233f, #0b1220 72%); border-color:rgba(255,255,255,.09); color:#EAF1FB; } .lp-bento-item.dark h3 { color:#EAF1FB; } .lp-bento-item.dark p { color:#9FB0C7; } .lp-bento-item.dark .b-ic { color:var(--fp-accent-2); } /* mini barres "par groupe" */ .b-bar { height:6px; border-radius:99px; background:var(--fp-accent); } .b-bar-bg { height:6px; border-radius:99px; background:color-mix(in srgb, var(--fp-muted) 20%, transparent); } /* --- FAQ --- */ .lp-faq { border:1px solid var(--fp-border); border-radius:14px; background:var(--fp-surface); padding:0 1.1rem; margin-bottom:.7rem; box-shadow:var(--fp-shadow-sm); } .lp-faq summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 0; font-weight:700; color:var(--fp-text); } .lp-faq summary::-webkit-details-marker { display:none; } .lp-faq summary .chev { transition:transform .2s var(--fp-ease); color:var(--fp-muted); flex-shrink:0; } .lp-faq[open] summary .chev { transform:rotate(180deg); } .lp-faq .faq-body { padding:0 0 1.05rem; color:var(--fp-muted); font-size:.92rem; line-height:1.6; } /* Boutons "lumineux" (héros) : lueur orange plus marquée */ .btn-glow { background:linear-gradient(135deg, var(--fp-accent-2), var(--fp-accent)); color:#0b1220; box-shadow:0 2px 4px rgba(249,115,22,.3), 0 14px 34px -12px rgba(249,115,22,.75); } .btn-glow:hover { transform:translateY(-1px); box-shadow:0 2px 4px rgba(249,115,22,.35), 0 20px 40px -12px rgba(249,115,22,.85); } /* Responsive bento + cluster */ @media (max-width:900px) { .lp-bento { grid-template-columns:repeat(2,1fr); grid-auto-rows:168px; } .b-2col { grid-column:span 2; } .b-2row { grid-row:span 1; } } @media (max-width:560px) { .lp-bento { grid-template-columns:1fr; grid-auto-rows:auto; } .b-2col, .b-2row { grid-column:span 1; grid-row:span 1; } .lp-bento-item { min-height:150px; } } @media (prefers-reduced-motion: reduce) { .lp-sweep { animation:none; display:none; } .lp-gauge { animation:none; } } /* ================================================================ PAGE D'ACCUEIL v3 — inspirée de 21st.dev Sombre premium, cartes "verre", halos, grille pointillée, hero centré. TOUT est scopé sous .st → n'affecte AUCUNE autre page. ================================================================ */ .st { background:#080B12; color:#E7EDF6; --st-line:rgba(255,255,255,.09); position:relative; } .st ::selection { background:rgba(249,115,22,.32); color:#fff; } /* Grille pointillée + halos ambiants (fixés en fond de page) */ .st-bg { position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(55% 40% at 78% -5%, rgba(249,115,22,.16), transparent 60%), radial-gradient(50% 42% at 12% 4%, rgba(14,165,233,.12), transparent 62%), #080B12; } .st-bg::after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); } .st > * { position:relative; z-index:1; } /* Barre de nav sombre "verre" */ .st-nav { position:sticky; top:0; z-index:50; background:rgba(8,11,18,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, background .25s; } .st-nav.is-scrolled { border-bottom-color:var(--st-line); background:rgba(8,11,18,.82); } .st-nav a.st-navlink { color:#9FB0C7; font-size:.9rem; font-weight:500; transition:color .15s; } .st-nav a.st-navlink:hover { color:#fff; } /* Sections */ .st .section { position:relative; } .st-hero { position:relative; padding-top:4.5rem; padding-bottom:4rem; text-align:center; } /* Pastille badge (haut du hero) */ .st-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:600; letter-spacing:.01em; padding:.4rem .85rem; border-radius:999px; color:#CBD6E6; background:rgba(255,255,255,.05); border:1px solid var(--st-line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .st-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--fp-ok); box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:lp-ping 1.6s ease-out infinite; } .st-badge b { color:#fff; font-weight:700; } /* Titres */ .st-h1 { font-weight:800; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2.4rem,6vw,4.6rem); color:#F4F8FF; } .st-h1 .it { font-style:italic; font-weight:900; background:linear-gradient(120deg,var(--fp-accent-2),var(--fp-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .st-lead { color:#9FB0C7; font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.6; } .st-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fp-accent); } .st-eyebrow::before { content:''; width:22px; height:2px; background:var(--fp-accent); border-radius:2px; } .st-h2 { font-weight:800; letter-spacing:-.025em; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.03; color:#F4F8FF; } .st-h2 .it { font-style:italic; font-weight:900; color:var(--fp-accent-2); } .st-muted { color:#93A3BC; } /* Boutons */ .st .btn-glow { color:#0b1220; } .st-btn-ghost { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem; border-radius:.7rem; font-weight:600; color:#E7EDF6; background:rgba(255,255,255,.05); border:1px solid var(--st-line); transition:background .15s, border-color .15s, transform .1s; } .st-btn-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); } .st-btn-ghost:active { transform:translateY(1px); } /* Carte "verre" (signature 21st) */ .st-glass { position:relative; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid var(--st-line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .22s var(--fp-ease), box-shadow .22s var(--fp-ease), transform .22s var(--fp-ease); } .st-glass:hover { transform:translateY(-4px); border-color:rgba(249,115,22,.42); box-shadow:0 0 0 1px rgba(249,115,22,.18), 0 34px 70px -34px rgba(0,0,0,.85), 0 0 44px -18px rgba(249,115,22,.4); } a.st-glass { display:block; color:inherit; } /* Aperçu produit du hero : 3 cartes verre en rangée */ .st-showcase { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:left; } .st-showcase .st-glass { padding:1.15rem 1.2rem; } .st-show-lbl { font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8598B4; } /* Bento sombre (réutilise .lp-bento pour la grille) */ .st .lp-bento-item { background:rgba(255,255,255,.035); border:1px solid var(--st-line); color:#E7EDF6; box-shadow:none; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .st .lp-bento-item h3 { color:#F4F8FF; } .st .lp-bento-item p { color:#93A3BC; } .st .lp-bento-item .b-ic { color:var(--fp-accent-2); } .st .lp-bento-item:hover { border-color:rgba(249,115,22,.42); transform:translateY(-4px); box-shadow:0 0 0 1px rgba(249,115,22,.18), 0 34px 70px -34px rgba(0,0,0,.85); } .st .lp-bento-item.dark { background:linear-gradient(160deg, rgba(19,35,63,.7), rgba(11,18,32,.7)); } .st .b-bar-bg { background:rgba(255,255,255,.1); } .st .text-slate-400 { color:#8598B4 !important; } /* Comparatif Sans / Avec (verre sombre) */ .st-vs { border-radius:18px; padding:1.5rem 1.4rem; border:1px solid var(--st-line); background:rgba(255,255,255,.03); } .st-vs.good { background:radial-gradient(120% 120% at 100% 0%, rgba(249,115,22,.14), transparent 60%), rgba(255,255,255,.03); border-color:rgba(249,115,22,.3); } .st-vs h3 { font-weight:900; font-style:italic; font-size:1.15rem; letter-spacing:-.01em; color:#F4F8FF; } .st-vs ul { margin-top:1rem; display:flex; flex-direction:column; gap:.7rem; } .st-vs li { display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:#C7D2E4; } .st-vs li svg { width:18px; height:18px; flex-shrink:0; margin-top:.1rem; } .st-vs.bad li { color:#8598B4; } .st-vs.bad li svg { color:#64748B; } .st-vs.good li svg { color:#34D399; } /* Étapes (verre sombre) */ .st .lp-step { background:rgba(255,255,255,.035); border:1px solid var(--st-line); color:#E7EDF6; box-shadow:none; } .st .lp-step h3 { color:#F4F8FF; } .st .lp-step p { color:#93A3BC !important; } .st .lp-step-num { background:rgba(249,115,22,.16); color:var(--fp-accent-2); border-color:rgba(249,115,22,.35); } /* Chiffres */ .st-stat { font-size:clamp(2.2rem,4vw,3.1rem); font-weight:900; font-style:italic; letter-spacing:-.02em; line-height:1; color:#F4F8FF; font-variant-numeric:tabular-nums; } .st-stat-lbl { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#8598B4; margin-top:.55rem; } /* FAQ sombre */ .st-faq { border:1px solid var(--st-line); border-radius:14px; background:rgba(255,255,255,.03); padding:0 1.1rem; margin-bottom:.7rem; } .st-faq summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 0; font-weight:700; color:#F4F8FF; } .st-faq summary::-webkit-details-marker { display:none; } .st-faq summary .chev { transition:transform .2s var(--fp-ease); color:#8598B4; flex-shrink:0; } .st-faq[open] summary .chev { transform:rotate(180deg); } .st-faq .faq-body { padding:0 0 1.05rem; color:#93A3BC; font-size:.92rem; line-height:1.6; } .st-faq b { color:#E7EDF6; } /* CTA final (bandeau lumineux) */ .st-cta { position:relative; overflow:hidden; border-radius:26px; text-align:center; padding:3.5rem 1.5rem; background:radial-gradient(120% 140% at 50% -20%, rgba(249,115,22,.28), transparent 60%), linear-gradient(160deg,#13233f,#0a1120 72%); border:1px solid rgba(255,255,255,.1); } /* Divider fin */ .st-rule { height:1px; background:var(--st-line); border:0; } @media (max-width:820px){ .st-showcase { grid-template-columns:1fr; } } /* ================================================================ FICHE (tiroir #drawer) — style & animations, PARTAGÉ toutes pages (véhicules, conducteurs, amendes, factures). Sélecteurs génériques → inoffensifs là où un élément n'existe pas. ================================================================ */ #drawer.drawer { transition: transform .44s cubic-bezier(.22,.61,.36,1); } .drawer-backdrop { transition: opacity .35s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* En-tête cockpit : halo orange + filet d'accent lumineux en bas. ⚠️ On ne remonte QUE le contenu .p-6 (pas les boutons absolus). */ #drawer > .relative { position: relative; overflow: hidden; } #drawer > .relative::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 130% at 90% -25%, rgba(249,115,22,.22), transparent 55%); } #drawer > .relative::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none; background: linear-gradient(90deg, var(--fp-accent), var(--fp-accent-2) 42%, transparent); } #drawer > .relative > .p-6 { position: relative; z-index: 1; } /* Plaque : reflet + éclat qui balaie à l'ouverture (véhicules) */ #drawer .plate { position: relative; overflow: hidden; } #drawer .plate::after { content:''; position:absolute; top:0; bottom:0; left:0; width:38%; pointer-events:none; background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-160%); } .drawer.fiche-in .plate::after { animation: fiche-shine 1s ease .4s 1; } /* Readouts d'en-tête en "puces verre" (véhicules) */ #drawer-readouts > div { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:.5rem .7rem; transition: transform .15s var(--fp-ease), background .15s, border-color .15s; } #drawer-readouts > div:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); border-color: rgba(249,115,22,.45); } /* Panneaux du corps : soulèvement + filet d'accent au survol */ #drawer-body .fp-panel { position: relative; transition: transform .2s var(--fp-ease), box-shadow .2s var(--fp-ease); } #drawer-body .fp-panel:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-lg); } #drawer-body .fp-panel::before { content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background: linear-gradient(var(--fp-accent), var(--fp-accent-2)); opacity:0; transition: opacity .2s; } #drawer-body .fp-panel:hover::before { opacity:1; } /* Boutons haut du tiroir : uniformise close/prev/next dans tous les tiroirs */ #drawer #drawer-close, #drawer #drawer-prev, #drawer #drawer-next { transition: background .15s, transform .12s; } #drawer #drawer-close:active, #drawer #drawer-prev:active, #drawer #drawer-next:active { transform: scale(.92); } /* Entrée animée — rejouée à chaque ouverture / navigation (classe .fiche-in) */ .drawer.fiche-in #drawer-gauge { animation: fiche-pop .55s var(--fp-ease) both .12s; } .drawer.fiche-in #drawer-title, .drawer.fiche-in [id$="-title"] { animation: fiche-rise .5s var(--fp-ease) both .05s; } .drawer.fiche-in #drawer-readouts > * { animation: fiche-pop .5s var(--fp-ease) both; } .drawer.fiche-in #drawer-readouts > *:nth-child(1){animation-delay:.14s} .drawer.fiche-in #drawer-readouts > *:nth-child(2){animation-delay:.2s} .drawer.fiche-in #drawer-readouts > *:nth-child(3){animation-delay:.26s} .drawer.fiche-in #drawer-readouts > *:nth-child(4){animation-delay:.32s} .drawer.fiche-in #drawer-body > * { animation: fiche-rise .55s var(--fp-ease) both; } .drawer.fiche-in #drawer-body > *:nth-child(1){animation-delay:.16s} .drawer.fiche-in #drawer-body > *:nth-child(2){animation-delay:.22s} .drawer.fiche-in #drawer-body > *:nth-child(3){animation-delay:.28s} .drawer.fiche-in #drawer-body > *:nth-child(4){animation-delay:.34s} .drawer.fiche-in #drawer-body > *:nth-child(5){animation-delay:.40s} .drawer.fiche-in #drawer-body > *:nth-child(6){animation-delay:.46s} .drawer.fiche-in #drawer-body > *:nth-child(7){animation-delay:.52s} .drawer.fiche-in #drawer-body > *:nth-child(n+8){animation-delay:.58s} @keyframes fiche-rise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} } @keyframes fiche-pop { from{opacity:0; transform:scale(.92) translateY(6px)} to{opacity:1; transform:none} } @keyframes fiche-shine{ to { transform: translateX(320%); } } @media (prefers-reduced-motion: reduce) { .drawer.fiche-in #drawer-title, .drawer.fiche-in [id$="-title"], .drawer.fiche-in #drawer-subtitle, .drawer.fiche-in #drawer-gauge, .drawer.fiche-in #drawer-readouts > *, .drawer.fiche-in #drawer-body > *, .drawer.fiche-in .plate::after { animation: none; } } /* ================================================================ 3D — tilt interactif des cartes du héros (page d'accueil .st) Sans dépendance : perspective + rotateX/Y pilotés à la souris (JS), avec un reflet qui suit le curseur. Désactivé au tactile / motion réduit. ================================================================ */ .st-showcase { perspective: 1100px; } .st-showcase .st-glass { transform-style: preserve-3d; will-change: transform; } .st-showcase .st-glass::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0; transition:opacity .25s ease; background: radial-gradient(320px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.16), transparent 60%); } .st-showcase .st-glass.tilting::before { opacity:1; } @media (prefers-reduced-motion: reduce) { .st-showcase .st-glass { transform:none !important; } } /* 3D — tilt aussi sur les tuiles bento « Ce que ça pilote » (page d'accueil) */ .st .lp-bento { perspective: 1000px; } .st .lp-bento-item { transform-style: preserve-3d; will-change: transform; } .st .lp-bento-item::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0; transition:opacity .25s ease; background: radial-gradient(300px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.12), transparent 60%); } .st .lp-bento-item.tilting::after { opacity:1; } @media (prefers-reduced-motion: reduce) { .st .lp-bento-item { transform:none !important; } } /* ================================================================ SIDEBAR RESPONSIVE (mobile ≤ 767px) — menu hamburger « off-canvas » Injecté globalement par app.js (bouton ☰ + overlay). Sur desktop, le hamburger et l'overlay sont masqués → aucun impact. ================================================================ */ .fp-nav-toggle { display:none; position:fixed; top:.6rem; left:.6rem; z-index:95; width:42px; height:42px; align-items:center; justify-content:center; background:var(--fp-primary); color:#fff; border:none; border-radius:11px; box-shadow:0 6px 18px -6px rgba(15,30,61,.5); cursor:pointer; } .fp-nav-toggle svg { width:22px; height:22px; } .fp-nav-overlay { display:none; position:fixed; inset:0; background:rgba(15,30,61,.45); z-index:88; opacity:0; pointer-events:none; transition:opacity .25s ease; } @media (max-width: 767px) { .fp-nav-toggle { display:inline-flex; } .fp-sidebar { position:fixed; top:0; left:0; height:100vh; height:100dvh; width:250px; max-width:82vw; z-index:90; display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .25s var(--fp-ease, ease); overflow-y:auto; box-shadow:0 0 50px rgba(0,0,0,.35); } body.fp-nav-open .fp-sidebar { transform:translateX(0); } .fp-nav-overlay { display:block; } body.fp-nav-open .fp-nav-overlay { opacity:1; pointer-events:auto; } main { padding-top:3.4rem !important; } /* laisse la place au bouton ☰ */ } /* ================================================================ ANIMATIONS 3D AU SURVOL (global — validé sur le tableau de bord) Bulles KPI : inclinaison vers le curseur (transform posé en JS par FP.enable3DTilt) + reflet lumineux .fp-glare. Onglets sidebar : relief. Respecte prefers-reduced-motion (aucun effet si l'utilisateur le demande). ================================================================ */ @media (prefers-reduced-motion: no-preference) { .kpi { transform-style: preserve-3d; } .kpi:hover { box-shadow: 0 26px 46px -24px rgba(15,30,61,.5); z-index: 2; } .kpi .fp-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s ease; background: radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), rgba(255,255,255,0) 60%); mix-blend-mode: soft-light; } .kpi:hover .fp-glare { opacity: 1; } .kpi:hover .kpi-ic { transform: translateZ(22px) scale(1.06); } .fp-sidebar nav a:not(.active):hover { transform: translateX(5px) translateY(-1px); box-shadow: 0 10px 20px -12px rgba(0,0,0,.55); } } /* ═══ Infobulles « à la sauce Parc Pilot » (remplacent les tooltips natifs title=) ═══ */ .fp-tip { position: fixed; z-index: 100001; max-width: 280px; pointer-events: none; background: rgba(11, 18, 32, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4; letter-spacing: .01em; padding: 7px 10px; border-radius: 8px; white-space: pre-line; word-wrap: break-word; box-shadow: 0 10px 26px -8px rgba(11,18,32,.55), 0 0 0 1px rgba(255,255,255,.06); opacity: 0; transform: translateY(2px); transition: opacity .13s ease, transform .13s ease; } .fp-tip.on { transform: translateY(0); } /* ═══ Champ obligatoire non rempli (remplace la bulle de validation native) ═══ */ .fp-invalid { border-color: var(--fp-danger, #EF4444) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.16) !important; animation: fp-invalid-shake .3s ease; } @keyframes fp-invalid-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .fp-invalid { animation: none; } } /* ═══ Bouton des champs fichier (type=file) aux couleurs Parc Pilot ═══ */ input[type="file"]::file-selector-button { margin-right: .7rem; padding: .5rem .9rem; border: none; border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .85rem; color: #fff; background: linear-gradient(135deg, var(--fp-accent-2, #FB923C), var(--fp-accent, #F97316)); box-shadow: 0 8px 18px -10px rgba(249,115,22,.7); transition: filter .15s, transform .12s; } input[type="file"]::file-selector-button:hover { filter: brightness(1.05); transform: translateY(-1px); } input[type="file"] { font-size: .85rem; color: #64748b; } /* ═══════════════ FINITIONS PREMIUM (globales) ═══════════════ */ /* 1) Contrôles natifs cohérents en thème clair + rendu de police soigné */ :root { color-scheme: light; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 2) Pas de flash gris au tap sur mobile */ * { -webkit-tap-highlight-color: transparent; } /* 3) Cases à cocher & boutons radio aux couleurs Parc Pilot. Agrandies (18px) pour être plus faciles à cliquer/taper — PARTOUT sur la plateforme. Le !important surclasse les tailles « 15px » posées en style inline (sélection de lignes, « Tout sélectionner », etc.). Les interrupteurs de l'app sont des