/* ══════════════════════════════════════════════════════════════════════ fd-theme.css — L'HABILLAGE DES THÈMES, POUR TOUT LE SITE ---------------------------------------------------------------------- Va de pair avec fd-theme.js, qui pose `data-theme` sur . À charger sur TOUTES les pages, tout en haut du . ⚠ MÉTHODE : INVERSION. Les pages contiennent 1 560 couleurs écrites en dur ; redéfinir des variables n'aurait repeint que 10 % de l'écran. `invert(1)` retourne tout ; `hue-rotate(180deg)` remet les teintes à l'endroit (sans lui, le bleu FASTODOC virerait à l'orange). ⚠ CE QUI NE DOIT JAMAIS ÊTRE INVERSÉ (on le ré-inverse donc) : • les photos et les logos — des visages en négatif, c'est inacceptable ; • LE DOCUMENT A4 et son aperçu — une attestation sur papier noir n'a aucun sens, c'est le produit qu'on vend. ⚠ LIMITES ASSUMÉES : les ombres portées s'éclaircissent au lieu de s'assombrir, et certains gris tirent légèrement. La version « propre » consiste à reprendre les 1 560 couleurs une par une. ══════════════════════════════════════════════════════════════════════ */ /* ── SOMBRE : gris foncé, comme un mode nuit classique ─────────────────── */ html[data-theme="sombre"] { filter: invert(1) hue-rotate(180deg); background: #0f1115; } /* ── NUIT : plus noir et plus doux, pour lire le soir ──────────────────── */ html[data-theme="nuit"] { filter: invert(1) hue-rotate(180deg) brightness(.82) saturate(.85); background: #05070c; } /* ── Remis à l'endroit dans les DEUX thèmes sombres ────────────────────── */ html[data-theme="sombre"] img, html[data-theme="nuit"] img, html[data-theme="sombre"] video, html[data-theme="nuit"] video, html[data-theme="sombre"] iframe, html[data-theme="nuit"] iframe, html[data-theme="sombre"] canvas, html[data-theme="nuit"] canvas, /* ⚠⚠ NE PAS REMETTRE `.card-image` / `.card-img-zone` / `.m-card-img-zone` DANS CETTE LISTE. Ces éléments CONTIENNENT des , qui sont déjà remis à l'endroit par la règle ci-dessus. Les inverser eux AUSSI faisait DEUX remises à l'endroit l'une sur l'autre : la photo repassait en négatif — les visages de l'accueil apparaissaient en couleurs inversées, exactement ce que cette section est censée empêcher. Le fond coloré de ces cases, lui, DOIT s'inverser : c'est ce qui le rend sombre en thème nuit. */ html[data-theme="sombre"] .card-bg, html[data-theme="nuit"] .card-bg, html[data-theme="sombre"] .fd-also-card-img, html[data-theme="nuit"] .fd-also-card-img, html[data-theme="sombre"] .fastodoc-doc-page, html[data-theme="nuit"] .fastodoc-doc-page, html[data-theme="sombre"] .a4-page, html[data-theme="nuit"] .a4-page, html[data-theme="sombre"] .a4-sheet, html[data-theme="nuit"] .a4-sheet, html[data-theme="sombre"] .doc-write-area, html[data-theme="nuit"] .doc-write-area, html[data-theme="sombre"] .mockup-content, html[data-theme="nuit"] .mockup-content, html[data-theme="sombre"] .doc-preview-img, html[data-theme="nuit"] .doc-preview-img, html[data-theme="sombre"] .review-avatar, html[data-theme="nuit"] .review-avatar, html[data-theme="sombre"] .header-account-avatar.has-photo, html[data-theme="nuit"] .header-account-avatar.has-photo { filter: invert(1) hue-rotate(180deg); } /* Le thème nuit assombrit tout : on rend aux IMAGES leur luminosité. */ html[data-theme="nuit"] img { filter: invert(1) hue-rotate(180deg) brightness(1.22) saturate(1.18); } /* ⚠ LE DOCUMENT RESTE BLANC, MAIS ADOUCI LA NUIT. Pourquoi blanc : c'est LE PRODUIT VENDU. Le client doit voir exactement la feuille qu'il va imprimer ou envoyer — un aperçu sur fond noir mentirait sur le PDF final. Pourquoi adouci : un rectangle blanc pur en pleine nuit, « ça pique ». On garde donc le papier blanc, juste un cran moins lumineux. */ html[data-theme="nuit"] .fastodoc-doc-page, html[data-theme="nuit"] .a4-page, html[data-theme="nuit"] .a4-sheet, html[data-theme="nuit"] .doc-write-area, html[data-theme="nuit"] .mockup-content, html[data-theme="nuit"] .doc-preview-img { filter: invert(1) hue-rotate(180deg) brightness(1.06) saturate(1.05); } html[data-theme="sombre"] .fastodoc-doc-page, html[data-theme="sombre"] .a4-page, html[data-theme="sombre"] .a4-sheet, html[data-theme="sombre"] .doc-write-area, html[data-theme="sombre"] .mockup-content, html[data-theme="sombre"] .doc-preview-img { filter: invert(1) hue-rotate(180deg) brightness(.94); } /* La barre du haut garde un blanc franc plutôt qu'un blanc inversé terne. */ html[data-theme="sombre"] .site-header.scrolled, html[data-theme="nuit"] .site-header.scrolled { background: #ffffff; } /* ══ LE SÉLECTEUR DE THÈME (dans le menu compte) ═══════════════════════ Deux panneaux qui glissent, comme chez forms.app : le menu principal, puis la liste des thèmes après un clic sur la ligne « Thème ». */ .header-account-dropdown { overflow: hidden; } .fd-pan { transition: transform .22s cubic-bezier(.4,0,.2,1); } .fd-pan-theme { position: absolute; inset: 0; padding: .5rem; background: #fff; border-radius: 16px; transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s; display: flex; flex-direction: column; } .header-account-dropdown.fd-voir-theme .fd-pan-principal { transform: translateX(-100%); opacity: 0; } .header-account-dropdown.fd-voir-theme .fd-pan-theme { transform: translateX(0); opacity: 1; pointer-events: auto; } .fd-pan-retour { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem; border: none; background: none; cursor: pointer; border-radius: 10px; font-family: 'Sora', sans-serif; font-size: .88rem; font-weight: 600; color: #111827; text-align: left; } .fd-pan-retour:hover { background: #f1f5f9; } .fd-pan-retour svg { width: 17px; height: 17px; flex-shrink: 0; } .fd-theme-opt { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .7rem; border: none; background: none; cursor: pointer; border-radius: 10px; font-family: 'Sora', sans-serif; font-size: .86rem; font-weight: 500; color: #111827; text-align: left; } .fd-theme-opt:hover { background: #f1f5f9; } .fd-theme-opt.actif { background: #f1f3f9; font-weight: 700; } .fd-theme-opt svg { width: 17px; height: 17px; flex-shrink: 0; color: #111827; } /* ══ ACCUEIL — LES ILLUSTRATIONS RESTENT FIDÈLES À LA CHARTE ═════════════ Le filtre global du mode sombre doit assombrir la page, pas recoloriser les visuels de catégories. On annule donc exactement le filtre à l’échelle de chaque carte, puis on laisse ses images sans filtre supplémentaire. */ html[data-theme="sombre"] .card-image { filter: invert(1) hue-rotate(180deg); } html[data-theme="nuit"] .card-image { filter: invert(1) hue-rotate(180deg) brightness(1.22) saturate(1.18); } html[data-theme="sombre"] .card-image img, html[data-theme="nuit"] .card-image img { filter: none !important; }