/* * Theme sombre partage — pages migrees uniquement. * * Charge par : dashboard, clients, devis-factures, interventions. * Fichier separe de liquid-glass.css a dessein : les pages non migrees * chargent liquid-glass.css mais PAS celui-ci, et ne portent pas la classe * .theme-sombre. Elles restent donc en theme clair, sans exception. * * Les regles de graphique (.bloc-tendance, .carte-graphique, .courbe-*) * ne concernent que le balisage du dashboard ; elles restent ici pour * garder une source unique de la palette, et sont inertes ailleurs. * * Tout est scope sous body.theme-sombre. La specificite * (body.liquid-glass.theme-sombre) l'emporte sur les declarations claires * de liquid-glass.css sans avoir a y toucher. */ body.liquid-glass.theme-sombre { /* --- Palette sombre --- */ --fond-page: #0b0d10; --texte-principal: #f2f3f5; --texte-secondaire: #9ca3af; --or: #b8934a; /* Surfaces vitrees : translucides sur fond sombre. */ --glass-fill: rgba(255, 255, 255, 0.07); --glass-fill-hover: rgba(255, 255, 255, 0.12); --glass-fill-active: rgba(255, 255, 255, 0.16); --glass-border: rgba(255, 255, 255, 0.12); --glass-border-fort: rgba(255, 255, 255, 0.22); --glass-blur: blur(18px) saturate(150%); --glass-blur-fort: blur(18px) saturate(150%); --glass-ombre: 0 2px 12px rgba(0, 0, 0, 0.5); --glass-ombre-hover: 0 6px 20px rgba(0, 0, 0, 0.6); /* On rebranche les variables de styles.css sur la palette sombre. */ --ink: var(--texte-principal); --ink-soft: var(--texte-secondaire); --white: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.12); --bg: #12151a; /* Courbes du graphique : vives, lisibles sur fond sombre. */ --courbe-facture: #f0c45a; --courbe-encaisse: #5ee9b5; --variation-positive: #4ade80; --variation-negative: #f87171; color: var(--texte-principal); } /* ========================================================================== * Pages de documents legaux (devis-view, facture-view) * * Elles recoivent la COQUILLE sombre — barre laterale, fond de page — mais * le document lui-meme reste blanc et strictement inchange. On reprend la * classe .document-view et la logique :not() deja posees au chantier clair, * transposees ici, plutot qu'un second mecanisme d'isolation. * * Deux leviers complementaires : * 1. :not(.document-view) sur toutes les regles qui ecrivent une valeur * sombre en dur (tableaux, badges, boutons, champs, typographie). * 2. Restauration de la palette claire ci-dessous : styles.css pilote le * fond des cellules, des totaux et le texte via --white / --bg / --ink. * Sans cette restauration, le theme sombre les remapperait et le * document virerait au noir. La specificite (0,3,1) passe devant la * declaration sombre (0,2,1), qui la precede pourtant dans le fichier. * ========================================================================== */ body.liquid-glass.theme-sombre.document-view { --white: #ffffff; --bg: #faf8f4; --border: #e0ddd6; --ink: #2a2a2a; --ink-soft: #5c5c5c; /* * Le bloc sombre pose `color` directement sur , pas via --ink : le * contenu de la carte blanche en heritait et passait en texte clair sur * blanc. On restaure la couleur d'encre d'origine, dont heritent la carte * et tout le document. Les seuls elements rendus HORS de la carte sont * recolores en clair juste en dessous. */ color: var(--ink); } /* * Le titre du document et le sous-titre « Paiements » sont rendus HORS de * la carte blanche, donc directement sur le fond sombre : ils doivent rester * clairs. Seule la couleur change — la typographie d'origine est conservee. */ body.liquid-glass.theme-sombre.document-view main > #content > h1, body.liquid-glass.theme-sombre.document-view main > #content > h2 { color: var(--texte-principal); } /* Etat de chargement, rendu hors carte lui aussi. */ body.liquid-glass.theme-sombre.document-view main > #content > .subtext, body.liquid-glass.theme-sombre.document-view main > #content > .error-box { color: var(--texte-secondaire); } body.liquid-glass.theme-sombre.document-view .breadcrumb a { color: var(--courbe-facture); } /* Fond de page : noir mat + halos froids tres discrets pour donner de la * matiere au backdrop-filter (un aplat uniforme ne produit aucun flou). */ body.liquid-glass.theme-sombre { background-color: var(--fond-page); background-image: radial-gradient(900px 600px at 0% 0%, rgba(120, 150, 190, 0.1), transparent 62%), radial-gradient(800px 520px at 100% 4%, rgba(184, 147, 74, 0.07), transparent 60%), radial-gradient(700px 820px at 2% 75%, rgba(120, 150, 190, 0.06), transparent 65%); } /* --- Barre laterale resserree --- */ body.liquid-glass.theme-sombre .app-sidebar { gap: 18px; padding: 18px 12px; border-right: 1px solid var(--glass-border); } body.liquid-glass.theme-sombre .app-sidebar img.logo { height: 96px; } body.liquid-glass.theme-sombre .app-sidebar nav a { padding: 9px 12px; color: var(--texte-secondaire); } body.liquid-glass.theme-sombre .app-sidebar nav a:hover, body.liquid-glass.theme-sombre .app-sidebar nav a:focus-visible, body.liquid-glass.theme-sombre .app-sidebar nav a[aria-current='page'] { color: var(--texte-principal); } /* --- Contenu densifie --- */ body.liquid-glass.theme-sombre:not(.document-view) main { max-width: 1120px; padding: 20px 24px 28px; } body.liquid-glass.theme-sombre:not(.document-view) h1 { font-size: 20px; margin: 0 0 2px; color: var(--texte-principal); } body.liquid-glass.theme-sombre:not(.document-view) h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-secondaire); margin: 18px 0 8px; } body.liquid-glass.theme-sombre:not(.document-view) .subtext { color: var(--texte-secondaire); } /* * Grille serree : 3 a 4 tuiles par rangee, cartes compactes. * * SCOPE IMPERATIF sur #dashboard-content. La classe .stat-card est partagee * avec stats.html, qui en rend 34 avec des libelles plus longs : la * densification calibree pour 7 tuiles ne doit pas s'y appliquer. Les cartes * de stats sont traitees plus bas, sous `main section`, en gardant leurs * propres dimensions. */ body.liquid-glass.theme-sombre #dashboard-content .stats-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 0; } body.liquid-glass.theme-sombre #dashboard-content .stat-card { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-ombre); } body.liquid-glass.theme-sombre #dashboard-content .stat-label { font-size: 11px; margin-bottom: 4px; color: var(--texte-secondaire); } body.liquid-glass.theme-sombre #dashboard-content .stat-value { font-size: 22px; line-height: 1.15; color: var(--texte-principal); font-variant-numeric: tabular-nums; } body.liquid-glass.theme-sombre #dashboard-content .stat-comparison { font-size: 11px; margin-top: 3px; color: var(--texte-secondaire); } body.liquid-glass.theme-sombre a.stat-card.dashboard-tuile:hover, body.liquid-glass.theme-sombre a.stat-card.dashboard-tuile:focus-visible { background: var(--glass-fill-hover); border-color: var(--glass-border-fort); box-shadow: var(--glass-ombre-hover); } /* --- Bouton principal : correction du contraste --- */ /* * Le fond or portait un texte blanc a 2,87:1, sous le seuil AA de 4,5:1 * depuis le debut du chantier. Le fond or de marque est conserve et c'est * le texte qui passe en noir mat : ratio mesure 6,74:1. */ body.liquid-glass.theme-sombre:not(.document-view) .btn:not(.secondary):not(.danger) { background: var(--or); border-color: var(--or); color: var(--fond-page); font-weight: 600; } body.liquid-glass.theme-sombre:not(.document-view) .btn.secondary { background: var(--glass-fill); border-color: var(--glass-border); color: var(--texte-principal); } body.liquid-glass.theme-sombre:not(.document-view) .btn.secondary:hover, body.liquid-glass.theme-sombre:not(.document-view) .btn.secondary:focus-visible { background: var(--glass-fill-hover); border-color: var(--glass-border-fort); } /* --- Variations chiffrees : fleche coloree --- */ body.liquid-glass.theme-sombre .variation { font-weight: 600; font-variant-numeric: tabular-nums; } body.liquid-glass.theme-sombre .variation.positive { color: var(--variation-positive); } body.liquid-glass.theme-sombre .variation.negative { color: var(--variation-negative); } /* --- Bloc tendance : graphique + tuile laterale --- */ body.liquid-glass.theme-sombre .bloc-tendance { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(230px, 1fr); gap: 10px; align-items: stretch; } body.liquid-glass.theme-sombre .carte-graphique { padding: 12px 14px 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-ombre); display: flex; flex-direction: column; gap: 8px; min-width: 0; } body.liquid-glass.theme-sombre .graphique-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; } body.liquid-glass.theme-sombre .graphique-total { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--texte-secondaire); } body.liquid-glass.theme-sombre .graphique-total .montant { font-size: 16px; font-weight: 700; color: var(--texte-principal); font-variant-numeric: tabular-nums; } body.liquid-glass.theme-sombre .graphique-total .pastille { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } body.liquid-glass.theme-sombre .pastille.facture { background: var(--courbe-facture); } body.liquid-glass.theme-sombre .pastille.encaisse { background: var(--courbe-encaisse); } body.liquid-glass.theme-sombre .graphique svg { display: block; width: 100%; height: auto; } body.liquid-glass.theme-sombre .graphique-note { font-size: 11px; color: var(--texte-secondaire); margin: 0; } /* * Tracé progressif : le trait est masque par un tiret de sa propre longueur * puis revele de gauche a droite. --longueur est pose en JS apres mesure. */ body.liquid-glass.theme-sombre .courbe-animee { stroke-dasharray: var(--longueur); stroke-dashoffset: var(--longueur); animation: tracer-courbe 700ms ease-out forwards; } @keyframes tracer-courbe { to { stroke-dashoffset: 0; } } /* --- Mouvement reduit : aucune animation, valeurs finales directes --- */ @media (prefers-reduced-motion: reduce) { body.liquid-glass.theme-sombre .courbe-animee { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } } /* --- Ecrans etroits --- */ @media (max-width: 900px) { body.liquid-glass.theme-sombre .app-sidebar { padding: 10px 12px; } body.liquid-glass.theme-sombre .app-sidebar img.logo { height: 40px; } body.liquid-glass.theme-sombre .bloc-tendance { grid-template-columns: minmax(0, 1fr); } body.liquid-glass.theme-sombre:not(.document-view) main { padding: 16px; } } /* ========================================================================== * Tableaux de donnees — pages de liste (clients, devis-factures, * interventions). Ils passent en sombre, contrairement aux documents * legaux (devis-view / facture-view) qui restent blancs et hors theme. * ========================================================================== */ body.liquid-glass.theme-sombre:not(.document-view) table { background: rgba(255, 255, 255, 0.03); border-color: var(--glass-border); } /* En-tetes : fond plus marque + filet bas net, pour rester scannables. */ body.liquid-glass.theme-sombre:not(.document-view) th { background: rgba(255, 255, 255, 0.07); color: var(--texte-secondaire); border-bottom: 1px solid rgba(255, 255, 255, 0.18); } body.liquid-glass.theme-sombre:not(.document-view) td { color: var(--texte-principal); border-bottom-color: rgba(255, 255, 255, 0.08); } body.liquid-glass.theme-sombre:not(.document-view) tr.clickable:hover { background: rgba(255, 255, 255, 0.06); } /* Metadonnees secondaires dans les cellules : meme hierarchie que les * libelles de tuiles du dashboard. */ body.liquid-glass.theme-sombre:not(.document-view) .subtext, body.liquid-glass.theme-sombre:not(.document-view) td .subtext, body.liquid-glass.theme-sombre:not(.document-view) .empty-state { color: var(--texte-secondaire); } body.liquid-glass.theme-sombre:not(.document-view) td a { color: var(--courbe-facture); } body.liquid-glass.theme-sombre:not(.document-view) .error-box { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.4); color: #f7a9a9; } /* ========================================================================== * Badges de statut — code semantique conserve (vert = positif, rouge = * negatif, bleu = signe...), transpose en fond teinte translucide + * texte clair de la meme teinte, lisible sur fond sombre. * ========================================================================== */ body.liquid-glass.theme-sombre:not(.document-view) .badge.pro { background: rgba(184, 147, 74, 0.2); color: #e6c07b; } body.liquid-glass.theme-sombre:not(.document-view) .badge.particulier, body.liquid-glass.theme-sombre:not(.document-view) .badge.envoye, body.liquid-glass.theme-sombre:not(.document-view) .badge.paye { background: rgba(74, 222, 128, 0.16); color: #6ee7a0; } body.liquid-glass.theme-sombre:not(.document-view) .badge.brouillon { background: rgba(214, 160, 100, 0.18); color: #e0ab73; } body.liquid-glass.theme-sombre:not(.document-view) .badge.signe { background: rgba(96, 165, 250, 0.18); color: #8ec2ff; } body.liquid-glass.theme-sombre:not(.document-view) .badge.expire { background: rgba(248, 113, 113, 0.16); color: #f7a9a9; } body.liquid-glass.theme-sombre:not(.document-view) .badge.non-paye { background: rgba(255, 255, 255, 0.1); color: #c2c9d4; } body.liquid-glass.theme-sombre:not(.document-view) .badge.partiel { background: rgba(240, 196, 90, 0.16); color: #f0c45a; } body.liquid-glass.theme-sombre:not(.document-view) .badge.trop-percu { background: rgba(167, 139, 250, 0.2); color: #c4b0fd; } /* ========================================================================== * Bouton danger (actions de suppression en ligne de tableau) * ========================================================================== */ body.liquid-glass.theme-sombre:not(.document-view) .btn.danger { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.45); color: #f7a9a9; } body.liquid-glass.theme-sombre:not(.document-view) .btn.danger:hover, body.liquid-glass.theme-sombre:not(.document-view) .btn.danger:focus-visible { background: rgba(248, 113, 113, 0.9); border-color: rgba(248, 113, 113, 0.9); color: var(--fond-page); } /* Champs de saisie en ligne de tableau (edition d'une intervention). */ body.liquid-glass.theme-sombre:not(.document-view) table input, body.liquid-glass.theme-sombre:not(.document-view) table select { background: var(--glass-fill); border-color: var(--glass-border); color: var(--texte-principal); } /* Le selecteur natif rend son menu deroulant avec les couleurs du systeme : * on force un fond sombre sur les options pour eviter du blanc sur blanc. */ body.liquid-glass.theme-sombre:not(.document-view) select option { background: #12151a; color: var(--texte-principal); } /* ========================================================================== * stats.html — les 34 cartes de metriques * * Volontairement SEPAREES des tuiles du dashboard : meme classe .stat-card, * mais structure et volumetrie differentes. Elles gardent les dimensions * definies dans styles.css (padding 14/16, valeur 24px) et ne recoivent que * le passage en sombre. Aucune animation : le comptage du dashboard est * pilote par les attributs data-anime emis par dashboard.js, que stats.js * ne produit pas — il n'y a donc rien a neutraliser ici. * ========================================================================== */ body.liquid-glass.theme-sombre main section .stat-card { background: rgba(255, 255, 255, 0.04); border-color: var(--glass-border); } body.liquid-glass.theme-sombre main section .stat-value { color: var(--texte-principal); } body.liquid-glass.theme-sombre main section .stat-label, body.liquid-glass.theme-sombre main section .stat-comparison { color: var(--texte-secondaire); } /* Variations : styles.css utilise --success / --danger, trop sombres sur * fond noir. On reprend les teintes deja validees sur le dashboard. */ body.liquid-glass.theme-sombre .stat-variation.positive { color: var(--variation-positive); } body.liquid-glass.theme-sombre .stat-variation.negative { color: var(--variation-negative); } body.liquid-glass.theme-sombre .stat-variation.neutral { color: var(--texte-secondaire); } /* Section de synthese (CA comparatif) : creme + bordure doree a l'origine. */ body.liquid-glass.theme-sombre .section-synthese { background: rgba(184, 147, 74, 0.07); border-color: rgba(184, 147, 74, 0.35); } body.liquid-glass.theme-sombre .section-synthese .stat-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(184, 147, 74, 0.28); } body.liquid-glass.theme-sombre .synthese-note { color: var(--texte-secondaire); } body.liquid-glass.theme-sombre .periode-resume { color: var(--texte-secondaire); } /* ========================================================================== * planning.html — grille de calendrier * ========================================================================== */ body.liquid-glass.theme-sombre .calendar-grid { background: rgba(255, 255, 255, 0.08); /* couleur des filets (gap 1px) */ border-color: var(--glass-border); } body.liquid-glass.theme-sombre .calendar-day { background: rgba(255, 255, 255, 0.03); color: var(--texte-principal); } body.liquid-glass.theme-sombre .calendar-day.other-month { background: rgba(255, 255, 255, 0.012); color: var(--texte-secondaire); } body.liquid-glass.theme-sombre .calendar-day-header { background: rgba(255, 255, 255, 0.07); color: var(--texte-secondaire); } /* * Pastille du jour courant : le fond or portait du texte blanc (2,87:1), * le meme defaut que le bouton principal. On applique le meme correctif. */ body.liquid-glass.theme-sombre .calendar-day.today .day-number { background: var(--or); color: var(--fond-page); } body.liquid-glass.theme-sombre .calendar-event-label { color: var(--texte-principal); } /* * Pastilles E / S / I : code semantique conserve (bleu = envoye, vert = * signe, or = intervention), mais en teintes claires avec texte sombre — * les aplats d'origine etaient trop sombres pour ressortir sur le fond noir. */ body.liquid-glass.theme-sombre .event-dot { color: var(--fond-page); } body.liquid-glass.theme-sombre .event-dot.envoye { background: #7fb8ff; } body.liquid-glass.theme-sombre .event-dot.signe { background: #6ee7a0; } body.liquid-glass.theme-sombre .event-dot.intervention { background: #f0c45a; } body.liquid-glass.theme-sombre .calendar-legend { color: var(--texte-secondaire); } body.liquid-glass.theme-sombre .calendar-toolbar h2 { color: var(--texte-principal); text-transform: none; font-size: 17px; letter-spacing: normal; } /* Flux d'ajout d'intervention : resultats de recherche et choix de devis. */ body.liquid-glass.theme-sombre .intervention-client-result, body.liquid-glass.theme-sombre .intervention-devis-option { color: var(--texte-principal); border-color: var(--glass-border); } body.liquid-glass.theme-sombre .intervention-client-result:hover, body.liquid-glass.theme-sombre .intervention-devis-option:hover { background: rgba(255, 255, 255, 0.08); } /* ========================================================================== * Champs de saisie libre (client-form, devis-new) * * styles.css ne leur donne qu'une bordure : sans fond explicite, le * navigateur applique son blanc par defaut, ce qui donnerait du texte clair * sur blanc. Ils restent des champs de formulaire classiques (pas de verre, * regle etablie au chantier clair), simplement recolores pour le sombre. * ========================================================================== */ body.liquid-glass.theme-sombre:not(.document-view) .field-group input, body.liquid-glass.theme-sombre:not(.document-view) .field-group textarea, body.liquid-glass.theme-sombre:not(.document-view) .ligne-devis input, body.liquid-glass.theme-sombre:not(.document-view) .ligne-devis textarea { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); color: var(--texte-principal); } body.liquid-glass.theme-sombre:not(.document-view) .field-group input:focus, body.liquid-glass.theme-sombre:not(.document-view) .field-group textarea:focus, body.liquid-glass.theme-sombre:not(.document-view) .ligne-devis input:focus { outline: none; background: rgba(255, 255, 255, 0.09); border-color: var(--glass-border-fort); } body.liquid-glass.theme-sombre:not(.document-view) input::placeholder, body.liquid-glass.theme-sombre:not(.document-view) textarea::placeholder { color: var(--texte-secondaire); opacity: 1; } /* Le pictogramme natif des champs date est noir : illisible sur fond sombre. */ body.liquid-glass.theme-sombre:not(.document-view) input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); } /* ========================================================================== * devis-new — lignes de devis et bloc de totaux * (formulaire de creation, donc theme sombre complet : ce n'est pas un * document legal fige comme devis-view / facture-view) * ========================================================================== */ body.liquid-glass.theme-sombre:not(.document-view) .ligne-devis { border-bottom-color: rgba(255, 255, 255, 0.08); } body.liquid-glass.theme-sombre:not(.document-view) .ligne-devis .col-header { color: var(--texte-secondaire); } body.liquid-glass.theme-sombre:not(.document-view) .ligne-devis .montant-cell { color: var(--texte-principal); } body.liquid-glass.theme-sombre:not(.document-view) .ligne-devis .remove-ligne { color: #f7a9a9; } body.liquid-glass.theme-sombre:not(.document-view) .totaux-box { background: rgba(255, 255, 255, 0.05); color: var(--texte-principal); } body.liquid-glass.theme-sombre:not(.document-view) .totaux-box .row.total { border-top-color: rgba(255, 255, 255, 0.18); } /* client-form : bascule pro / particulier (boutons nus, comme le selecteur * de periode de stats — meme vocabulaire verre). */ body.liquid-glass.theme-sombre:not(.document-view) .field-group label { color: var(--texte-secondaire); } /* client.html : le bloc d'informations et les liens du detail. */ body.liquid-glass.theme-sombre:not(.document-view) .card { color: var(--texte-principal); } /* ========================================================================== * Page de connexion — pas de barre laterale (l'utilisateur n'est pas * encore authentifie), carte vitree centree. * ========================================================================== */ body.liquid-glass.theme-sombre.page-connexion { padding-left: 0; } body.liquid-glass.theme-sombre .connexion { max-width: none; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } body.liquid-glass.theme-sombre .carte-connexion { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 4px; padding: 28px 26px 26px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur-fort); backdrop-filter: var(--glass-blur-fort); box-shadow: var(--glass-ombre-hover); text-align: center; } body.liquid-glass.theme-sombre .logo-connexion { height: 88px; width: auto; align-self: center; margin-bottom: 8px; } body.liquid-glass.theme-sombre .carte-connexion h1 { font-size: 17px; margin: 0; } body.liquid-glass.theme-sombre .carte-connexion .subtext { margin: 0 0 14px; } body.liquid-glass.theme-sombre .carte-connexion .field-group { text-align: left; margin-bottom: 10px; } body.liquid-glass.theme-sombre .carte-connexion .btn { width: 100%; margin-top: 4px; } body.liquid-glass.theme-sombre .erreur-connexion { margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; background: rgba(248, 113, 113, 0.14); border: 1px solid rgba(248, 113, 113, 0.4); color: #f7a9a9; font-size: 13px; text-align: left; } /* --- Bouton de deconnexion dans la barre laterale --- */ body.liquid-glass.theme-sombre .form-deconnexion { margin-top: auto; padding-top: 12px; } body.liquid-glass.theme-sombre .btn-deconnexion { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: transparent; color: var(--texte-secondaire); font-size: 13px; font-family: inherit; cursor: pointer; transition: background var(--glass-transition), border-color var(--glass-transition), color var(--glass-transition); } body.liquid-glass.theme-sombre .btn-deconnexion:hover, body.liquid-glass.theme-sombre .btn-deconnexion:focus-visible { background: var(--glass-fill-hover); border-color: var(--glass-border-fort); color: var(--texte-principal); }