/* ════════════════════════════════════════════════════════════════════ FASTSERVICES — Nouveau thème de marque (clair) Activé UNIQUEMENT si (interrupteur réversible). Charte : violet #5a1aa0 · turquoise #3db5a0 · rouge #c42531 · encre #0e0e11. Polices : Poppins (titres, wordmark en 800 italique) + IBM Plex Mono (labels). But : identité propre, fini « généré par IA ». ────────────────────────────────────────────────────────────────────── Ce fichier ne fait QUE des surcharges sous html.fs-theme → le thème classique (sombre) reste intact quand l'interrupteur est sur « Classique ». ════════════════════════════════════════════════════════════════════ */ html.fs-theme { --fs-violet:#5a1aa0; --fs-violet-light:#9168e6; --fs-turquoise:#3db5a0; --fs-red:#c42531; --fs-ink:#0e0e11; --fs-bg:#edeef1; --fs-surface:#fff; --fs-field:#f4f5f7; --fs-border:#e6e8ec; --fs-border-soft:#e1e3e8; --fs-text:#15151a; --fs-text-muted:#6b6d75; --fs-success:#15803d; --fs-status:#e30613; --fs-action:#d70065; /* Remap des variables de l'app classique → charte CLAIRE. Ceci bascule en clair tout ce qui utilise ces variables (y compris les styles inline qui référencent var(--accent-primary), var(--text-main), etc.). */ --bg-dark:#edeef1; --bg-card:#ffffff; --accent-primary:#5a1aa0; /* violet remplace le bleu */ --accent-glow:rgba(90,26,160,.18); --accent-success:#15803d; --accent-warning:#f59e0b; --accent-error:#c42531; --text-main:#15151a; --text-dim:#6b6d75; --border:#e6e8ec; --card-shadow:0 1px 3px rgba(20,20,30,.05), 0 12px 30px rgba(20,20,30,.05); } /* ─── Fondation ─────────────────────────────────────────────────────── */ html.fs-theme body { background: var(--fs-bg); color: var(--fs-text); font-family: 'Poppins', system-ui, -apple-system, sans-serif; padding: 0 0 80px; /* l'en-tête est plein-cadre */ background-image: none; /* retire les halos sombres */ -webkit-font-smoothing: antialiased; } html.fs-theme .container, html.fs-theme #app-main.container { max-width: 1360px; margin: 0 auto; padding: 30px 30px 0; } /* ═══ EN-TÊTE PLEINE LARGEUR ════════════════════════════════════════════ */ html.fs-theme header[role="banner"] { max-width: none; width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--fs-border); border-radius: 0; background: var(--fs-surface); box-shadow: 0 1px 0 rgba(20,20,30,.02), 0 8px 24px rgba(20,20,30,.03); /* contenu centré dans 1360 mais bande blanche plein écran */ padding: 18px max(24px, calc((100% - 1360px) / 2)); gap: 16px; justify-content: flex-start; /* ☰ + logo groupés à gauche (comme le mockup) */ position: sticky; top: 0; z-index: 60; } /* Les contrôles (garage, email, ATELIER, SMS, AIDE, Déconnexion) poussés à droite */ html.fs-theme header[role="banner"] .auth-controls { margin-left: auto; } /* Wordmark de marque : symbole tricolore + FAST·SERVICES (Poppins 800 italique, SERVICES violet) sur UNE SEULE LIGNE, avec soulignement tricolore dessous. Reproduit le lockup du mockup à l'aide de pseudo-éléments (markup inchangé). */ html.fs-theme header[role="banner"] .logo { flex: 0 0 auto; /* ⚠️ NE PAS s'étirer (le thème classique met flex:1) */ display: inline-block; width: auto; position: relative; font-family: 'Poppins', sans-serif; font-weight: 800; font-style: italic; font-size: 1.72rem; line-height: 1; letter-spacing: -.01em; color: var(--fs-ink); background: none; -webkit-text-fill-color: currentColor; -webkit-background-clip: initial; background-clip: initial; white-space: nowrap; /* FAST et SERVICES restent sur la même ligne */ padding: 3px 1px 11px 44px; /* haut · droite · bas (soulignement) · gauche (symbole) */ } html.fs-theme header[role="banner"] .logo span { color: var(--fs-violet); } /* Symbole tricolore, aligné à gauche du lockup */ html.fs-theme header[role="banner"] .logo::before { content: ""; position: absolute; left: 0; top: 2px; width: 31px; height: 30px; background: url("brand/mark.svg") left center/contain no-repeat; } /* Soulignement tricolore biseauté, sous TOUT le lockup (symbole + mot), proportions 2.4 / 1.5 / 1 comme la charte. */ html.fs-theme header[role="banner"] .logo::after { content: ""; position: absolute; left: 0; right: 1px; bottom: 1px; height: 4px; border-radius: 2px; transform: skewX(-11deg); background: linear-gradient(90deg, var(--fs-violet) 0 49%, var(--fs-turquoise) 49% 79.6%, var(--fs-red) 79.6% 100%); } /* Bouton menu ☰ */ html.fs-theme .main-menu-btn { background: var(--fs-field); border: 1px solid var(--fs-border); color: var(--fs-text); border-radius: 10px; } html.fs-theme .main-menu-btn:hover { background: #ececf0; border-color: #d7dae0; } /* Contrôles à droite : pastilles bordées sur fond clair */ html.fs-theme .auth-controls { gap: 12px; } html.fs-theme .badge-btn { background: var(--fs-surface); border: 1.5px solid #c6cad4; color: var(--fs-text); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .9rem; letter-spacing: .04em; border-radius: 11px; padding: 13px 24px; box-shadow: 0 1px 2px rgba(20,20,30,.04); transition: background .15s, border-color .15s, color .15s, box-shadow .15s; } html.fs-theme .badge-btn:hover { box-shadow: 0 3px 10px rgba(20,20,30,.08); } html.fs-theme .badge-btn:hover { background: var(--fs-field); border-color: #b9bdc7; } /* Bouton ATELIER : accent violet plein (action de navigation principale) */ html.fs-theme #dashboard-btn { background: var(--fs-violet); border-color: var(--fs-violet); color: #fff; } html.fs-theme #dashboard-btn:hover { background: #4a1487; border-color: #4a1487; } html.fs-theme .user-badge { color: var(--fs-turquoise); font-weight: 600; } html.fs-theme .garage-badge { background: var(--fs-surface); border: 1px solid var(--fs-border); color: var(--fs-text); border-radius: 10px; } html.fs-theme .sms-header-unread { color: #fff; } /* ═══ ÉCRAN D'ACCUEIL (identification + plan) ═══════════════════════════ */ html.fs-theme .card, html.fs-theme .sidebar .card, html.fs-theme .results-panel { background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(20,20,30,.04), 0 12px 30px rgba(20,20,30,.04); color: var(--fs-text); } /* Titre de section « Identification » (monospace + chevrons ) */ html.fs-theme .section-title { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fs-violet); } html.fs-theme .section-title svg { color: var(--fs-violet); } /* Labels de champs : mono, gris, espacés */ html.fs-theme .input-group label { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fs-text-muted); } /* Champs / sélecteurs */ html.fs-theme .input-group input, html.fs-theme .input-group select, html.fs-theme input[type="text"], html.fs-theme input[type="number"], html.fs-theme input[type="search"], html.fs-theme select { background: var(--fs-field); border: 1px solid var(--fs-border-soft); border-radius: 9px; color: var(--fs-text); font-family: 'Poppins', sans-serif; font-weight: 600; } html.fs-theme .input-group input:focus, html.fs-theme .input-group select:focus, html.fs-theme select:focus, html.fs-theme input:focus { outline: none; border-color: var(--fs-violet); box-shadow: 0 0 0 3px rgba(90,26,160,.14); } html.fs-theme input::placeholder { color: #9aa0a8; } /* Statut décodage VIN */ html.fs-theme .api-status { background: rgba(21,128,61,.07); border: 1px solid rgba(21,128,61,.28); color: var(--fs-success); border-radius: 9px; } /* Titre du véhicule (gros, Poppins 800) */ html.fs-theme .results-panel h1, html.fs-theme .vehicle-title, html.fs-theme .plan-title { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.01em; color: var(--fs-text); } /* Boutons d'action (Imprimer = magenta, Copier = bordé) */ html.fs-theme .btn-primary, html.fs-theme .print-btn, html.fs-theme button.print { background: var(--fs-action); border: 1px solid var(--fs-action); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; border-radius: 9px; } html.fs-theme .btn-secondary, html.fs-theme .copy-btn { background: var(--fs-surface); border: 1px solid #cfd2da; color: var(--fs-text); border-radius: 9px; } /* ═══ ÉCRAN DU PLAN (rapport de maintenance) ═══════════════════════════ */ /* En-tête du rapport : titre véhicule + sous-titres + actions */ html.fs-theme .report-title { color: var(--fs-text); } html.fs-theme .report-title h1, html.fs-theme .report-title > :first-child { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.01em; color: var(--fs-text); } html.fs-theme .report-title .vin, html.fs-theme .report-title small, html.fs-theme .report-title a { color: var(--fs-violet); } /* Boutons IMPRIMER (magenta plein) / COPIER (bordé) */ html.fs-theme .report-actions .badge-btn { border-radius: 9px; padding: 11px 20px; font-weight: 600; } html.fs-theme .report-actions button[onclick*="print"] { background: var(--fs-action); border: 1px solid var(--fs-action); color: #fff; } html.fs-theme .report-actions button[onclick*="print"]:hover { background: #bd0059; border-color: #bd0059; } html.fs-theme .report-actions button[onclick*="copyReport"] { background: var(--fs-surface); border: 1px solid #cfd2da; color: var(--fs-text); } /* Cartes de specs (KM / Moteur / Rouage / Transmission) */ html.fs-theme .specs-grid { gap: 14px; } html.fs-theme .spec-card { background: var(--fs-field); border: 1px solid var(--fs-border); border-radius: 11px; box-shadow: none; } html.fs-theme .spec-label { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fs-text-muted); } html.fs-theme .spec-value { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--fs-text); } /* Tableau des services */ html.fs-theme .table-container { background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: 14px; overflow: hidden; } html.fs-theme .table-container table { border-collapse: collapse; width: 100%; } /* En-tête sombre (contraste sur fond clair, comme le mockup) */ html.fs-theme .table-container thead th { background: #2a2f3a; color: #cfd3db; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 16px 20px; text-align: left; } html.fs-theme .table-container thead th:last-child { text-align: right; } /* Lignes : fond blanc, bordure gauche rouge (« à faire »), séparateurs doux */ html.fs-theme .table-container tbody tr { background: var(--fs-surface); border-bottom: 1px solid #eef0f2; border-left: 3px solid var(--fs-status); } html.fs-theme .table-container tbody td { padding: 22px 20px; vertical-align: middle; } html.fs-theme .table-container .task-name { color: var(--fs-text) !important; /* écrase le inline color:white */ font-family: 'Poppins', sans-serif; font-size: 1.15rem !important; font-weight: 700 !important; } html.fs-theme .table-container .task-action { color: var(--fs-violet) !important; /* uppercase, action recommandée */ font-weight: 600 !important; } html.fs-theme .table-container tbody td:last-child { color: var(--fs-text) !important; font-family: 'Poppins', sans-serif; font-size: 1rem !important; } /* Section notes (si présente) */ html.fs-theme .notes-section, html.fs-theme .note-card { background: var(--fs-surface); border: 1px solid var(--fs-border); color: var(--fs-text); border-radius: 12px; } /* Bandeau "mode test" (s'il s'affiche) reste lisible sur clair */ html.fs-theme .dev-banner { color: #15151a; } /* ═══ ATELIER (liste des tickets) ═══════════════════════════════════════ */ html.fs-theme .admin-modal-header h2 { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--fs-violet); } /* Bouton « + Nouveau ticket » → violet de marque (au lieu d'orange) */ html.fs-theme .dashboard-create-btn { background: var(--fs-violet); border: 1px solid var(--fs-violet); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; } html.fs-theme .dashboard-create-btn:hover { background: #4a1487; border-color: #4a1487; } /* Bouton « OUVRIR » → violet (au lieu d'indigo) */ html.fs-theme .ticket-card-open-btn { background: var(--fs-violet); } html.fs-theme .ticket-card-open-btn:hover { background: #4a1487; } /* Numéro de BR en violet de marque */ html.fs-theme .ticket-ro strong { color: var(--fs-violet); } /* Carte ticket : surface claire nette + séparation douce */ html.fs-theme .ticket-card { background: var(--fs-surface); border: 1px solid var(--fs-border); } html.fs-theme .ticket-card:hover { border-color: #d7dae0; background: #fafbfc; } /* Compteur "X en atelier" */ html.fs-theme .dashboard-stats, html.fs-theme .dashboard-counter { color: var(--fs-text-muted); } /* ═══ INSPECTION (DVI) ═══════════════════════════════════════════════════ Le module DVI est déjà clair (contenu) + sidebar sombre (design AutoServe1). Le remap a mis les accents actifs en violet. Petit alignement : titres en violet de marque (au lieu de bleu). */ html.fs-theme .dvi-form-page-title { color: var(--fs-violet); } html.fs-theme .dvi-form-section-title { color: var(--fs-violet); } html.fs-theme .dvi-form-banner-value, html.fs-theme .dvi-form-banner-label { color: #cbd5e1; } /* bandeau RO# reste sombre */ /* ═══ ÉTABLISSEMENT (Personnel / Inspections / Options / Détails) ═══════════ Cohérent via le remap ; on aligne les boutons « ajouter/créer » (orange) sur le violet de marque, et le titre. */ html.fs-theme #establishment-modal .admin-modal-header h2 { color: var(--fs-violet); } html.fs-theme .staff-mgmt-add-btn, html.fs-theme .template-list-actions .garage-form-save-btn { background: var(--fs-violet); border-color: var(--fs-violet); color: #fff; } html.fs-theme .staff-mgmt-add-btn:hover, html.fs-theme .template-list-actions .garage-form-save-btn:hover { background: #4a1487; opacity: 1; } /* Onglet actif de l'établissement en violet */ html.fs-theme .establishment-tab.is-active { color: var(--fs-violet); } /* ═══ LANDING (page d'accueil avant connexion) ═════════════════════════ */ html.fs-theme #landing-screen { background: var(--fs-bg); } html.fs-theme .landing-bg { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(90,26,160,.10) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 82% 65%, rgba(61,181,160,.10) 0%, transparent 55%); } /* En-tête landing : carte blanche */ html.fs-theme .landing-header { background: var(--fs-surface); border: 1px solid var(--fs-border); box-shadow: 0 1px 3px rgba(20,20,30,.04), 0 12px 30px rgba(20,20,30,.05); } /* Logo de marque (lockup) sur la landing */ html.fs-theme .landing-logo { position: relative; display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 800; font-style: italic; font-size: 1.8rem; line-height: 1; letter-spacing: -.01em; background: none; -webkit-text-fill-color: initial; color: var(--fs-ink); white-space: nowrap; padding: 3px 1px 12px 48px; } html.fs-theme .landing-logo-fast { background: none; -webkit-text-fill-color: currentColor; color: var(--fs-ink); } html.fs-theme .landing-logo-services { background: none; -webkit-text-fill-color: currentColor; color: var(--fs-violet); } html.fs-theme .landing-logo::before { content: ""; position: absolute; left: 0; top: 2px; width: 33px; height: 31px; background: url("brand/mark.svg") left center/contain no-repeat; } html.fs-theme .landing-logo::after { content: ""; position: absolute; left: 0; right: 1px; bottom: 1px; height: 4px; border-radius: 2px; transform: skewX(-11deg); background: linear-gradient(90deg, var(--fs-violet) 0 49%, var(--fs-turquoise) 49% 79.6%, var(--fs-red) 79.6% 100%); } /* Boutons */ html.fs-theme .landing-btn { font-family: 'Poppins', sans-serif; } html.fs-theme .landing-btn-ghost { color: var(--fs-text-muted); } html.fs-theme .landing-btn-ghost:hover { color: var(--fs-text); } html.fs-theme .landing-btn-primary { background: var(--fs-violet); color: #fff; box-shadow: 0 6px 18px rgba(90,26,160,.28); } html.fs-theme .landing-btn-primary:hover { background: #4a1487; } html.fs-theme .landing-btn-outline { background: var(--fs-surface); color: var(--fs-text); border: 1px solid #cfd2da; } html.fs-theme .landing-btn-outline:hover { background: var(--fs-field); border-color: #b9bdc7; } /* Hero */ html.fs-theme .landing-hero-title { color: var(--fs-text); font-family: 'Poppins', sans-serif; } html.fs-theme .landing-hero-gradient { background: linear-gradient(120deg, var(--fs-violet) 0%, var(--fs-turquoise) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.fs-theme .landing-hero-subtitle { color: var(--fs-text-muted); } /* Cartes de fonctionnalités — icônes en triade de marque */ html.fs-theme .landing-feature-card { background: var(--fs-surface); backdrop-filter: none; border: 1px solid var(--fs-border); box-shadow: 0 1px 3px rgba(20,20,30,.04), 0 10px 26px rgba(20,20,30,.04); } html.fs-theme .landing-feature-card:hover { background: #fafbfc; border-color: #d7dae0; } html.fs-theme .landing-feature-icon { background: rgba(90,26,160,.10); color: var(--fs-violet); } html.fs-theme .landing-feature-card:nth-child(2) .landing-feature-icon { background: rgba(61,181,160,.12); color: var(--fs-turquoise); } html.fs-theme .landing-feature-card:nth-child(3) .landing-feature-icon { background: rgba(196,37,49,.10); color: var(--fs-red); } html.fs-theme .landing-feature-title { color: var(--fs-text); font-family: 'Poppins', sans-serif; } html.fs-theme .landing-feature-desc { color: var(--fs-text-muted); } html.fs-theme .landing-footer { color: var(--fs-text-muted); border-top: 1px solid var(--fs-border); } /* ═══ DIALOGUES SECONDAIRES (audit page par page) ══════════════════════ */ /* Titres de carte DVI (Courriel client, Lien partageable, Joindre estimé…) en violet — sauf l'avertissement "photos requises" qui reste ambre. */ html.fs-theme .dvi-form-card-title { color: var(--fs-violet); } html.fs-theme .dvi-prepare-req-photos .dvi-form-card-title { color: #92400e; } html.fs-theme .dvi-form-end-marker { color: var(--fs-text-muted); } /* "Aller à l'item →" (était orange) → violet */ html.fs-theme .dvi-prepare-req-go { background: var(--fs-violet); } html.fs-theme .dvi-prepare-req-go:hover { background: #4a1487; } /* Créer un ticket : les 3 cartes prennent la TRIADE de marque (violet / turquoise / rouge) au lieu d'indigo/vert/orange. */ html.fs-theme .ct-card-owner { border-color: rgba(90,26,160,.40); } html.fs-theme .ct-card-owner .ct-card-num { background: var(--fs-violet); } html.fs-theme .ct-card-vehicle { border-color: rgba(61,181,160,.50); } html.fs-theme .ct-card-vehicle .ct-card-num { background: var(--fs-turquoise); } html.fs-theme .ct-card-inspection { border-color: rgba(196,37,49,.40); } html.fs-theme .ct-card-inspection .ct-card-num { background: var(--fs-red); } html.fs-theme #ct-save-btn { background: var(--fs-violet); border-color: var(--fs-violet); color: #fff; } html.fs-theme #ct-save-btn:hover { background: #4a1487; } /* Tâches : « + Nouvelle tâche » → violet */ html.fs-theme #tasks-create-btn { background: var(--fs-violet); border-color: var(--fs-violet); color: #fff; } html.fs-theme #tasks-create-btn:hover { background: #4a1487; } /* Formulaire « Demander un essai » / Contact (landing) — était sombre */ html.fs-theme .contact-modal { background: var(--fs-surface); border: 1px solid var(--fs-border); box-shadow: 0 25px 60px rgba(20,20,30,.25); } html.fs-theme .contact-modal-title { color: var(--fs-text); font-family: 'Poppins', sans-serif; font-weight: 800; } html.fs-theme .contact-modal-subtitle { color: var(--fs-text-muted); } html.fs-theme .contact-modal-close { color: var(--fs-text-muted); } html.fs-theme .contact-modal-close:hover { color: var(--fs-text); } html.fs-theme .contact-form-label { color: var(--fs-text-muted); } html.fs-theme .contact-form-input { background: var(--fs-field); border: 1px solid var(--fs-border-soft); color: var(--fs-text); } html.fs-theme .contact-form-input:focus { border-color: var(--fs-violet); box-shadow: 0 0 0 3px rgba(90,26,160,.14); } html.fs-theme .contact-form-input::placeholder { color: #9aa0a8; } html.fs-theme .contact-form-submit { background: var(--fs-violet); border: 1px solid var(--fs-violet); color: #fff; } html.fs-theme .contact-form-submit:hover { background: #4a1487; } /* ═══ ONGLETS D'INSPECTION (Historique / Inspection / … / Envoyer) ══════════ Sur la barre sombre du DVI. Le remap rendait l'inactif gris FONCÉ (peu lisible) → on remet un gris CLAIR + on agrandit. Actif en violet clair (lisible sur fond sombre, conforme à la charte « violet clair sur noir »). */ html.fs-theme .dvi-tab { color: #c4ccd9; font-size: 0.95rem; font-weight: 700; padding: 1rem 1.45rem; letter-spacing: 0.045em; } html.fs-theme .dvi-tab:hover { color: #fff; } html.fs-theme .dvi-tab.is-active { color: var(--fs-violet-light); border-bottom-color: var(--fs-violet-light); border-bottom-width: 3px; } /* ═══ MENU LATÉRAL (drawer ☰) ═══════════════════════════════════════════ Dans le nouveau thème le drawer passe en blanc (--bg-card) mais le texte restait blanc (--text-primary non défini) → invisible sauf au survol. On force le texte en sombre. (Icônes du menu retirées côté markup.) */ html.fs-theme .main-drawer { background: var(--fs-surface); border-right: 1px solid var(--fs-border); box-shadow: 6px 0 24px rgba(20,20,30,.12); } html.fs-theme .main-drawer-head { border-bottom: 1px solid var(--fs-border); } html.fs-theme .main-drawer-brand { color: var(--fs-ink); } html.fs-theme .main-drawer-brand span { color: var(--fs-violet); } html.fs-theme .main-drawer-close { color: var(--fs-text-muted); } html.fs-theme .main-drawer-close:hover { background: var(--fs-field); color: var(--fs-text); } html.fs-theme .main-drawer-section-title { color: var(--fs-text-muted); } /* Bloc garage (logo + nom) : le nom était blanc (var --text-primary) → invisible sur le fond clair du drawer. On le passe à l'encre de marque. */ html.fs-theme .main-drawer-user-name { color: var(--fs-ink); } /* Bloc « Connecté en tant que » (nom blanc invisible sur fond clair → encre de marque). */ html.fs-theme .main-drawer-account { border-top-color: var(--fs-border); } html.fs-theme .main-drawer-account-label { color: var(--fs-text-muted); } html.fs-theme .main-drawer-account-name { color: var(--fs-ink); } html.fs-theme .main-drawer-account-email { color: var(--fs-text-muted); } html.fs-theme .main-drawer-account-role { background: rgba(90,26,160,.12); color: var(--fs-violet); } html.fs-theme .main-drawer-item { color: var(--fs-text); } html.fs-theme .main-drawer-item:hover { background: rgba(90,26,160,.08); color: var(--fs-violet); } html.fs-theme .main-drawer-item:active { background: rgba(90,26,160,.14); } html.fs-theme .main-drawer-divider { background: var(--fs-border); } /* ═══ ÉCRAN DE CHARGEMENT (init-loader) ═════════════════════════════════ Styles inline sombres par défaut (thème classique). En clair, on surcharge en !important (le inline gagne sinon). */ html.fs-theme #init-loader { background: var(--fs-bg) !important; color: var(--fs-text) !important; } html.fs-theme #init-loader .il-fast { color: var(--fs-ink); } html.fs-theme #init-loader .il-services { color: var(--fs-violet) !important; } html.fs-theme #init-loader .init-loader-dots { color: var(--fs-text-muted) !important; } /* ═══ FENÊTRE AIDE (help-modal) — était sombre ═════════════════════════ */ html.fs-theme .help-modal { background: var(--fs-surface); border: 1px solid var(--fs-border); box-shadow: 0 25px 60px rgba(20,20,30,.25); } html.fs-theme .help-modal-close { background: var(--fs-field); border: 1px solid var(--fs-border); color: var(--fs-text-muted); } html.fs-theme .help-modal-close:hover { background: var(--fs-red); border-color: var(--fs-red); color: #fff; } html.fs-theme .help-modal-header { border-bottom: 1px solid var(--fs-border); } html.fs-theme .help-modal-title { color: var(--fs-text); font-family: 'Poppins', sans-serif; font-weight: 800; } html.fs-theme .help-modal-subtitle { color: var(--fs-text-muted); } html.fs-theme .help-form-label { color: var(--fs-text-muted); } html.fs-theme .help-form-input { background: var(--fs-field); border: 1px solid var(--fs-border-soft); color: var(--fs-text); } html.fs-theme .help-form-input:focus { border-color: var(--fs-violet); box-shadow: 0 0 0 3px rgba(90,26,160,.14); } html.fs-theme .help-form-input::placeholder { color: #9aa0a8; } html.fs-theme .help-form-submit { background: var(--fs-violet); border: 1px solid var(--fs-violet); color: #fff; } html.fs-theme .help-form-submit:hover { background: #4a1487; } /* ═══ CALENDRIERS (Flatpickr) — le thème sombre est chargé globalement ; on ré-éclaire le popup sous le nouveau thème. ════════════════════════════ */ html.fs-theme .flatpickr-calendar { background: var(--fs-surface); border: 1px solid var(--fs-border); box-shadow: 0 10px 34px rgba(20,20,30,.18); } html.fs-theme .flatpickr-calendar::before, html.fs-theme .flatpickr-calendar::after { border-bottom-color: var(--fs-surface); border-top-color: var(--fs-surface); } html.fs-theme .flatpickr-months, html.fs-theme .flatpickr-weekdays, html.fs-theme .flatpickr-weekdaycontainer, html.fs-theme span.flatpickr-weekday, html.fs-theme .flatpickr-month, html.fs-theme .flatpickr-days, html.fs-theme .flatpickr-calendar .dayContainer { background: var(--fs-surface); } html.fs-theme .flatpickr-current-month, html.fs-theme .flatpickr-current-month input.cur-year, html.fs-theme .flatpickr-monthDropdown-months { color: var(--fs-text); fill: var(--fs-text); } html.fs-theme span.flatpickr-weekday { color: var(--fs-text-muted); } html.fs-theme .flatpickr-day { color: var(--fs-text); } html.fs-theme .flatpickr-day:hover { background: var(--fs-field); border-color: var(--fs-field); } html.fs-theme .flatpickr-day.today { border-color: var(--fs-violet); } html.fs-theme .flatpickr-day.selected, html.fs-theme .flatpickr-day.selected:hover { background: var(--fs-violet); border-color: var(--fs-violet); color: #fff; } html.fs-theme .flatpickr-day.flatpickr-disabled, html.fs-theme .flatpickr-day.prevMonthDay, html.fs-theme .flatpickr-day.nextMonthDay { color: #b9bfca; } html.fs-theme .flatpickr-prev-month svg, html.fs-theme .flatpickr-next-month svg { fill: var(--fs-text); } html.fs-theme .flatpickr-prev-month:hover svg, html.fs-theme .flatpickr-next-month:hover svg { fill: var(--fs-violet); } html.fs-theme .flatpickr-time input, html.fs-theme .flatpickr-time .flatpickr-am-pm, html.fs-theme .flatpickr-time .flatpickr-time-separator { color: var(--fs-text); } html.fs-theme .flatpickr-time input:hover, html.fs-theme .flatpickr-time .flatpickr-am-pm:hover { background: var(--fs-field); } html.fs-theme .numInputWrapper span { border-color: var(--fs-border); } /* ═══ CARNET D'ENTRETIEN (logbook, intégré au plan) — était sombre ═══════ */ html.fs-theme .logbook-toggle-btn { background: var(--fs-field) !important; border: 1px solid var(--fs-border) !important; color: var(--fs-text-muted) !important; } html.fs-theme .logbook-toggle-btn:hover, html.fs-theme .logbook-toggle-btn.logbook-toggle-active { background: rgba(90,26,160,.08) !important; border-color: rgba(90,26,160,.30) !important; color: var(--fs-violet) !important; } html.fs-theme .logbook-entry-card { background: var(--fs-field); border: 1px solid var(--fs-border); backdrop-filter: none; -webkit-backdrop-filter: none; } html.fs-theme .logbook-entry-divider { background: var(--fs-border); } html.fs-theme .logbook-input { background: var(--fs-surface) !important; border: 1px solid var(--fs-border-soft) !important; color: var(--fs-text) !important; font-family: 'Poppins', sans-serif !important; } html.fs-theme .logbook-input:hover { border-color: #b9bdc7 !important; background: var(--fs-surface) !important; } html.fs-theme .logbook-input:focus { border-color: var(--fs-violet) !important; background: var(--fs-surface) !important; box-shadow: 0 0 0 3px rgba(90,26,160,.14) !important; } html.fs-theme .logbook-save-btn { background: var(--fs-violet) !important; border: 1px solid var(--fs-violet) !important; color: #fff !important; } /* Outils admin flottants : repoussés SOUS l'en-tête (sinon ils le chevauchent). */ html.fs-theme .admin-orphan-audit-btn { top: 98px; } html.fs-theme .billing-import-btn { top: 146px; }