/* ══════════════════════════════════════════════════════════════════════ fd-header.css — LA BARRE DU HAUT, UNE SEULE FOIS POUR TOUT LE SITE ---------------------------------------------------------------------- Reprise À L'IDENTIQUE de celle de l'accueil (index.html) : recherche au centre, menu « Documents » déroulant, FAQ, et le bouton compte (avatar + menu) quand le visiteur est connecté. Avant, les pages Mon compte, FAQ, Contact, CGV, mentions légales et confidentialité avaient une VIEILLE barre (logo + burger, parfois une recherche qui ne cherchait rien). Le visiteur changeait de page et la barre changeait de tête. Deux habillages : • par défaut → barre transparente posée sur un héros sombre, qui devient blanche au défilement (comme l'accueil) ; • fond clair → barre blanche en permanence : mettre data-fond="clair" sur
. ⚠ Cette feuille doit être chargée EN DERNIER dans le : les pages ont leurs propres règles .site-header / .logo-text, et à spécificité égale c'est la dernière qui gagne. ══════════════════════════════════════════════════════════════════════ */ /* Couleur d'accent : celle de la page si elle en définit une, sinon le bleu FASTODOC. Évite d'imposer --primary aux pages qui n'en ont pas. */ .site-header { --fd-accent: var(--primary, #1A50CC); } /* ── Barre ─────────────────────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: background .25s ease, transform .35s cubic-bezier(.4,0,.2,1); overflow: visible; } /* ⚠ PAS DE TRAIT NI D'OMBRE SOUS LA BARRE : l'accueil n'en a pas, et le trait se voyait sur les autres pages. On garde le fond blanc, rien d'autre. */ .site-header.scrolled { background: #fff; box-shadow: none; border-bottom: 0; } @media (max-width: 768px) { .site-header { height: auto; box-shadow: none; } } .header-content { display: flex; justify-content: space-between; align-items: center; padding: 0 30px; height: 64px; max-width: 1400px; margin: 0 auto; position: relative; } .logo-text { font-weight: 900; color: #fff; font-size: 1.35rem; letter-spacing: -.04em; flex-shrink: 0; text-decoration: none; font-family: 'Sora', sans-serif; display: flex; align-items: center; gap: 8px; } .site-header.scrolled .logo-text { color: #111827; } #headerFaviconImg { transition: filter .2s; } #headerFaviconImg.fd-force-white { filter: brightness(0) invert(1); } .site-header.scrolled #headerFaviconImg { filter: none; } /* ── Liens (bureau) ────────────────────────────────────────────────── */ .header-nav-icons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 24px; } @media (max-width: 768px) { .header-nav-icons { display: none; } } .header-nav-icon { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; width: auto; height: auto; padding: .55rem 14px; border-radius: 12px; text-decoration: none; color: rgba(255,255,255,.85); transition: background .15s, color .15s; background: none; border: none; cursor: pointer; } .header-nav-icon svg { width: 18px; height: 18px; flex-shrink: 0; } .header-nav-icon-label { font-size: .85rem; font-weight: 600; font-family: 'Sora', sans-serif; letter-spacing: -.01em; white-space: nowrap; } .header-nav-icon:hover { background: none; color: #fff; } .header-nav-icon.active-link { background: none; color: #818cf8; } .site-header.scrolled .header-nav-icon { color: #111827; } .site-header.scrolled .header-nav-icon:hover { background: none; color: var(--fd-accent); } .site-header.scrolled .header-nav-icon.active-link { color: var(--fd-accent); } /* ── Menu déroulant « Documents » ──────────────────────────────────── */ .header-docs-wrap { position: relative; } .header-docs-chevron { width: 14px; height: 14px; margin-left: -2px; flex-shrink: 0; } .header-docs-wrap::before { content: ""; position: absolute; left: 0; right: -100px; top: 100%; height: 16px; pointer-events: none; } .header-docs-wrap:hover::before { pointer-events: auto; } .header-docs-dropdown { width: 200px !important; top: calc(100% + 12px) !important; box-shadow: 0 10px 24px rgba(0,0,0,.16) !important; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; display: block !important; pointer-events: none; left: 0 !important; right: auto !important; } .header-docs-dropdown::before { content: ""; position: absolute; top: -7px; left: 36px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: -3px -3px 6px rgba(0,0,0,.04); } .header-docs-wrap:hover .header-docs-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .header-docs-dropdown .header-account-item { color: #191E55; font-weight: 600; } .header-docs-dropdown .header-account-item:hover { background: #f1f5f9; } /* ── Bouton compte + son menu ──────────────────────────────────────── */ .header-account-wrap, .header-account-logged-wrap { position: relative; } .header-account-logged-wrap::before { content: ""; position: absolute; left: -150px; right: 0; top: 100%; height: 16px; pointer-events: none; } .header-account-logged-wrap:hover::before { pointer-events: auto; } .header-account-btn-logged { display: flex; align-items: center; gap: 5px; padding: .4rem 10px .4rem .4rem; border-radius: 100px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.85); transition: background .15s, color .15s; } .header-account-btn-logged:hover { background: rgba(255,255,255,.12); color: #fff; } .site-header.scrolled .header-account-btn-logged { color: #111827; } .site-header.scrolled .header-account-btn-logged:hover { background: #f1f5f9; color: #111827; } .header-account-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background-size: cover; background-position: center; } .site-header.scrolled .header-account-avatar { background-color: #f1f5f9; } .header-account-avatar svg { width: 18px; height: 18px; } .header-avatar-initials { display: none; font-size: .72rem; font-weight: 700; color: #fff; font-family: 'Sora', sans-serif; letter-spacing: -.02em; } .header-account-avatar.has-photo { background-color: transparent !important; } .header-account-avatar.has-photo svg { display: none; } .header-account-avatar.has-initials { background: #191E55 !important; } .header-account-avatar.has-initials svg { display: none; } .header-account-avatar.has-initials .header-avatar-initials { display: block; } .header-account-btn-logged .chevron { width: 14px; height: 14px; flex-shrink: 0; } .header-account-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 220px; background: #fff; border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.16); padding: .5rem; z-index: 950; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; } .header-account-dropdown::before { content: ""; position: absolute; top: -7px; right: 20px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: -3px -3px 6px rgba(0,0,0,.04); } .header-account-dropdown.open, .header-account-logged-wrap:hover .header-account-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .header-account-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem .7rem; border-radius: 10px; text-decoration: none; color: #111827 !important; font-size: .88rem; font-weight: 500; font-family: 'Sora', sans-serif; transition: background .15s; } .header-account-item svg { width: 18px; height: 18px; flex-shrink: 0; color: #111827; } .header-account-item:hover { background: #f1f5f9; } .header-account-divider { height: 1px; background: #e2e8f0; margin: .4rem .3rem; } .header-account-identity { padding: .55rem .7rem .65rem; } .header-account-identity-name { font-size: .9rem; font-weight: 700; color: #111827; font-family: 'Sora', sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-account-identity-plan { font-size: .78rem; font-weight: 500; color: #94a3b8; margin-top: 1px; } .header-account-theme { padding: .5rem 0 .6rem; } .header-account-theme-label { font-size: .72rem; font-weight: 600; color: #94a3b8; letter-spacing: .03em; margin-bottom: .5rem; padding: 0 .7rem; } .header-account-theme-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: .4rem .7rem; font-family: 'Sora', sans-serif; color: #111827; border-radius: 10px; } .header-account-theme-row:hover { background: #f1f5f9; } .header-account-theme-row-left { display: flex; align-items: center; gap: .65rem; } .header-account-theme-row-left svg { width: 18px; height: 18px; color: #111827; flex-shrink: 0; } .header-account-theme-row-text { font-size: .86rem; font-weight: 500; text-align: left; line-height: 1.25; } .header-account-theme-row > svg { width: 16px; height: 16px; color: #94a3b8; flex-shrink: 0; } .header-account-item.logout-item, .logout-item { color: #dc2626 !important; } .logout-item svg { color: #dc2626 !important; } /* ── Recherche ─────────────────────────────────────────────────────── */ .header-search { position: absolute; left: 50%; transform: translateX(-50%); width: 440px; pointer-events: auto; } .header-search input { width: 100%; padding: .85rem 3.3rem .85rem 1.4rem; border-radius: 100px; border: none; background: #f1f5f9; color: #111827; font-size: .88rem; font-family: 'Sora', sans-serif; outline: none; transition: background .2s, border-radius .2s; } .header-search input::placeholder { color: #3A4757; } .header-search input:focus { background: #e8ecf0; } .header-search.open input { border-radius: 16px 16px 0 0; } /* ⚠ « left: auto » OBLIGATOIRE. Les pages (Mon compte, FAQ…) ont leur propre règle `.header-search-icon { left: 0.9rem }`. Même spécificité : mon `right` s'appliquait, mais leur `left` AUSSI — et quand les deux sont posés, c'est la gauche qui gagne. Résultat : la loupe bleue collée à gauche, par-dessus le texte « Rechercher un document… ». */ .header-search-icon { position: absolute; right: .55rem; left: auto; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: #1A50CC; color: #fff; border: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; transition: background .15s; } .header-search-icon:hover { background: #153FB5; } .header-search-icon svg { width: 15px; height: 15px; } .header-search-clear { position: absolute; right: 3.5rem; left: auto; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0; background: #3A4757; color: #fff; cursor: pointer; z-index: 2; transition: background .15s; } .header-search-clear:hover { background: #2C3645; } .header-search-clear svg { width: 10px; height: 10px; } .header-search.has-value .header-search-clear { display: flex; } .header-search.has-value input { padding-right: 5.7rem; } .header-search-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0 0 16px 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.18); z-index: 999; border-top: none; } .header-search.open .header-search-dropdown { display: block; } .header-search-result { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.1rem; text-decoration: none; color: #111827; font-size: .88rem; font-weight: 600; transition: background .15s; cursor: pointer; } .header-search-result:hover { background: #f8fafc; } .header-search-result-icon { width: 32px; height: 32px; background: #eef2ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .header-search-result-info { flex: 1; min-width: 0; } .header-search-result-title { font-size: .82rem; font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-search-result-title strong { font-weight: 700; } .header-search-result-sub { font-size: .72rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-search-result-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .header-search-result-rating { font-size: .75rem; font-weight: 700; color: #f59e0b; } .header-search-result-price { font-size: .82rem; font-weight: 700; color: #111827; } .header-search-more { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .75rem 1.1rem; font-size: .82rem; font-weight: 700; color: #1A50CC; background: #f8fafc; text-decoration: none; border-top: 1px solid #f1f5f9; transition: background .15s; } .header-search-more:hover { background: #eaf1fc; } .header-search-recent-title { padding: .65rem 1.1rem .4rem; font-size: .78rem; font-weight: 600; color: #9ca3af; } .header-search-recent-item { display: flex; align-items: center; gap: .4rem; padding: .2rem 1.4rem .2rem 1.1rem; transition: background .15s; } .header-search-recent-item:hover { background: #f8fafc; } .header-search-recent-item a { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; padding: .45rem 0; text-decoration: none; color: #374151; font-size: .85rem; font-weight: 600; } .header-search-recent-item a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-search-recent-item a svg { flex-shrink: 0; color: #9ca3af; } .header-search-recent-item:hover a { color: #111827; } .header-search-recent-delete { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: none; padding: 0; background: transparent; color: #9ca3af; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; } .header-search-recent-delete:hover { background: #e5e7eb; color: #111827; } /* Même pastille « Gratuit » que l'accueil et le catalogue — ne pas inventer une autre couleur, ce serait le seul endroit du site où « Gratuit » ne se ressemble pas. */ .badge-gratuit { display: inline-block; background: #e2e8f0; color: #111827; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .01em; } @media (max-width: 768px) { .header-content { flex-wrap: wrap; padding: 1rem 1.25rem .75rem; gap: .75rem; height: auto; } .header-search { position: relative; transform: none; left: auto; width: 100%; order: 3; margin: 0 0 .25rem; } .header-search input { padding: .75rem 1.2rem .75rem 2.8rem; font-size: 16px; border-radius: 14px; } .header-search.open input { border-radius: 14px 14px 0 0; } .header-search.has-value input { padding-right: 1.2rem; } .header-search-icon { left: .9rem; right: auto; top: 50%; transform: translateY(-50%); width: auto; height: auto; background: none; color: #9ca3af; pointer-events: none; } .header-search-icon:hover { background: none; } .header-search-clear { right: .6rem; left: auto; } } /* ── Burger + menu mobile ──────────────────────────────────────────── */ .hamburger { background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; z-index: 1001; flex-shrink: 0; display: none; } .site-header.scrolled .hamburger { color: #111827; } @media (max-width: 768px) { .hamburger { display: flex !important; } } .mobile-menu { display: none; flex-direction: column; background: #fff; border-top: 1px solid #e5e7eb; padding: 1.2rem 1.5rem 1.5rem; gap: .3rem; box-shadow: 0 8px 24px rgba(0,0,0,.1); position: absolute; top: 100%; left: 0; right: 0; z-index: 49; } .mobile-menu.open { display: flex; } .mobile-menu a { display: block; text-decoration: none; color: #374151; font-weight: 600; font-size: .95rem; font-family: 'Sora', sans-serif; padding: .8rem .75rem; border-radius: 12px; transition: background .15s, color .15s; text-align: left; } .mobile-menu a:hover, .mobile-menu a.active-link { background: #f1f5f9; color: #111827; } /* ══ LE BURGER : DEUX PANNEAUX QUI GLISSENT ════════════════════════════ ⚠ Le thème n'existait que dans le menu « compte », visible uniquement sur ordinateur : au téléphone, on ne pouvait PAS changer de thème. ⚠ Et il ouvrait d'abord une liste dépliée vers le BAS — le proprio veut le MÊME geste que sur ordinateur : un sous-menu qui glisse. C'est fait ici, avec exactement les mêmes classes (`.fd-pan-principal`, `.fd-pan-theme`, `.fd-voir-theme`) que le menu compte. */ .mobile-menu { position: absolute; overflow: hidden; } .mobile-menu .fd-pan-principal { display: flex; flex-direction: column; gap: .3rem; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s; } .mobile-menu .fd-pan-theme { position: absolute; inset: 0; padding: 1.2rem 1.5rem 1.5rem; background: #fff; display: flex; flex-direction: column; gap: .2rem; transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s; } .mobile-menu.fd-voir-theme .fd-pan-principal { transform: translateX(-100%); opacity: 0; } .mobile-menu.fd-voir-theme .fd-pan-theme { transform: translateX(0); opacity: 1; pointer-events: auto; } .mobile-menu .fd-pan-retour { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .8rem .75rem; border: none; background: none; cursor: pointer; border-radius: 12px; font-family: 'Sora', sans-serif; font-size: .95rem; font-weight: 700; color: #111827; text-align: left; } .mobile-menu .fd-pan-retour:hover { background: #f1f5f9; } .mobile-menu .fd-pan-retour svg { width: 18px; height: 18px; flex-shrink: 0; } /* ── L'action principale, en tête du menu ───────────────────────────── Elle doit se distinguer des liens de navigation au premier coup d'œil : c'est la raison d'être du site, pas une rubrique parmi d'autres. */ .fd-menu-cta { display: flex !important; align-items: center; justify-content: center; gap: .6rem; background: #1A50CC; color: #fff !important; padding: .95rem .75rem !important; border-radius: 12px; font-weight: 700 !important; font-size: .98rem; margin-bottom: .5rem; } .fd-menu-cta:hover { background: #123C9E !important; color: #fff !important; } .fd-menu-cta svg { width: 18px; height: 18px; flex-shrink: 0; } /* Le bloc compte : même taille que la navigation, mais au-dessus du trait. */ .mobile-menu .fd-menu-compte { font-weight: 700; } .fd-menu-trait { height: 1px; background: #f1f5f9; margin: .5rem .2rem; } /* Se déconnecter — en rouge discret, et séparé du reste du menu. */ .fd-menu-sortie { display: block; text-decoration: none; color: #b91c1c !important; font-weight: 600; font-size: .95rem; font-family: 'Sora', sans-serif; padding: .8rem .75rem; border-radius: 12px; margin-top: .2rem; border-top: 1px solid #f1f5f9; } .fd-menu-sortie:hover { background: #fef2f2; } .fd-menu-theme-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .8rem .75rem; margin-top: .3rem; border: none; background: none; cursor: pointer; border-radius: 12px; font-family: 'Sora', sans-serif; font-size: .95rem; font-weight: 600; color: #374151; text-align: left; border-top: 1px solid #f1f5f9; } .fd-menu-theme-row:hover { background: #f1f5f9; color: #111827; } .fd-menu-theme-left { display: flex; align-items: center; gap: .7rem; } .fd-menu-theme-left svg { width: 18px; height: 18px; flex-shrink: 0; } /* La flèche pivote vers le bas quand la liste est ouverte : on voit tout de suite que la ligne se déplie au lieu de mener ailleurs. */ .fd-menu-theme-row > svg { width: 17px; height: 17px; transition: transform .2s; } .fd-menu-theme-row.ouvert > svg { transform: rotate(90deg); } /* ⚠ Plus de `display:none` ici : la liste vit maintenant DANS le panneau qui glisse, c'est lui qui la montre ou la cache. La classe `.ouverte` n'est plus utilisée. */ .fd-menu-theme-liste { padding: .15rem 0 .2rem 0; } .fd-menu-theme-liste .fd-theme-opt { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .75rem; border: none; background: none; cursor: pointer; border-radius: 12px; font-family: 'Sora', sans-serif; font-size: .9rem; font-weight: 500; color: #374151; text-align: left; } .fd-menu-theme-liste .fd-theme-opt:hover { background: #f1f5f9; } .fd-menu-theme-liste .fd-theme-opt.actif { background: #f1f3f9; color: #111827; font-weight: 700; } .fd-menu-theme-liste .fd-theme-opt svg { width: 18px; height: 18px; flex-shrink: 0; } /* Réserve la hauteur de la barre quand la page n'a pas de héros sombre (Mon compte) : sans ça le contenu passe SOUS la barre fixe. */ .fd-header-espace { height: 64px; } @media (max-width: 768px) { .fd-header-espace { display: none; } } /* ══════════════════════════════════════════════════════════════════════ THÈME SOMBRE — VERSION 1, PAR INVERSION ---------------------------------------------------------------------- ⚠ POURQUOI CETTE MÉTHODE ET PAS DES VARIABLES DE COULEUR. Comptage du 12 août 2026 : les 5 pages publiques contiennent **1 560 couleurs écrites en dur** (#fff, #111827, #f8fafc…) contre 161 usages de variables. Redéfinir les variables n'aurait donc changé que ~10 % de l'écran : on aurait obtenu une page blanche avec quelques éléments sombres — pire que rien. L'inversion retourne TOUTE la page d'un coup. `hue-rotate(180deg)` remet les teintes à l'endroit, sinon le bleu FASTODOC virerait à l'orange. ⚠ CE QU'IL NE FAUT PAS INVERSER — on ré-inverse ces éléments pour les remettre à l'endroit : • les photos et les logos (des visages en négatif = inacceptable) ; • LE DOCUMENT A4 : une attestation sur papier noir n'a aucun sens, c'est le produit qu'on vend. ⚠ LIMITES ASSUMÉES de cette version : les ombres portées s'éclaircissent au lieu de s'assombrir, et certains gris tirent légèrement. La version propre = reprendre les 1 560 couleurs une par une. À faire seulement si le proprio valide le principe. ══════════════════════════════════════════════════════════════════════ */ html[data-theme="sombre"] { filter: invert(1) hue-rotate(180deg); background: #0f1115; } /* Remis à l'endroit : images, vidéos, cadres colorés des cartes, et le document lui-même. */ html[data-theme="sombre"] img, html[data-theme="sombre"] video, html[data-theme="sombre"] iframe, html[data-theme="sombre"] .card-image, html[data-theme="sombre"] .card-bg, html[data-theme="sombre"] .fd-also-card-img, html[data-theme="sombre"] .m-card-img-zone, html[data-theme="sombre"] .card-img-zone, html[data-theme="sombre"] .fastodoc-doc-page, html[data-theme="sombre"] .a4-page, html[data-theme="sombre"] .doc-write-area, html[data-theme="sombre"] .mockup-content, html[data-theme="sombre"] .review-avatar, html[data-theme="sombre"] .header-account-avatar.has-photo { filter: invert(1) hue-rotate(180deg); } /* La barre du haut garde un fond franc plutôt qu'un blanc inversé terne. */ html[data-theme="sombre"] .site-header.scrolled { background: #ffffff; } /* ── Le sélecteur de thème dans le menu compte ────────────────────────── */ .fd-theme-choix { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; } .fd-theme-opt { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .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: #eef2ff; font-weight: 700; } .fd-theme-opt svg { width: 17px; height: 17px; flex-shrink: 0; color: #111827; }