/* ══════════════════════════════════════════════════════════════════════ 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.5rem 1.25rem 2rem; gap: 0; box-shadow: none; position: fixed; top: var(--fd-menu-top, 0px); left: 0; right: 0; z-index: 899; height: calc(100dvh - var(--fd-menu-top, 0px)); min-height: 0; max-height: none; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; } .mobile-menu.open { display: flex; } .mobile-menu a { display: block; text-decoration: none; color: #374151; font-weight: 600; font-size: 1rem; font-family: 'Sora', sans-serif; padding: 1rem 0; border-radius: 0; border-bottom: 1px solid #e5e7eb; transition: color .15s, padding-left .15s; text-align: left; } .mobile-menu a:hover, .mobile-menu a.active-link { background: transparent; color: #111827; padding-left: .35rem; } /* ══ 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: fixed !important; top: calc(var(--fd-menu-top, 0px) + 10px) !important; left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; height: auto !important; max-height: none !important; padding: 24px 22px 28px !important; border: 0 !important; border-radius: 26px !important; box-shadow: 0 18px 50px rgba(15,23,42,.16) !important; overflow: hidden !important; } .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: 1rem 0; border: none; border-bottom: 1px solid #e5e7eb; background: none; cursor: pointer; border-radius: 0; font-family: 'Sora', sans-serif; font-size: 1rem; 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: 1rem .75rem !important; border-radius: 14px !important; 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: 1rem; font-family: 'Sora', sans-serif; padding: 1rem 0; border-radius: 0; 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: 1rem 0; margin-top: .3rem; border: none; border-radius: 0; border-top: 1px solid #f1f5f9; background: none; cursor: pointer; font-family: 'Sora', sans-serif; font-size: 1rem; 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: .85rem 0; border: none; background: none; cursor: pointer; border-radius: 0; font-family: 'Sora', sans-serif; font-size: .95rem; 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; } /* ── Version mobile inspirée du panneau MEDVi ────────────────────────── Le menu est une carte blanche presque plein écran : le header reste au premier plan avec le logo et le burger transformé en fermeture. */ @media (max-width: 768px) { .site-header.fd-menu-open { background: transparent !important; box-shadow: none !important; } .site-header.fd-menu-open .header-search { display: none !important; } .site-header.fd-menu-open .logo-text, .site-header.fd-menu-open .hamburger { color: #111827 !important; position: relative; z-index: 1002; } .site-header.fd-menu-open .header-content { height: 64px; padding: .85rem 2rem; position: relative; z-index: 1001; } .mobile-menu { display: none !important; top: 0 !important; left: 16px !important; right: 16px !important; bottom: 16px !important; height: auto; max-height: none; min-height: 0; padding: 5.5rem 1.5rem 1.5rem; border: 0 !important; border-radius: 24px !important; box-shadow: 0 12px 35px rgba(15,23,42,.18) !important; z-index: 899; } .mobile-menu.open { display: flex !important; } .mobile-menu .fd-pan-principal > a:not(.fd-menu-cta)::after { content: '›'; float: right; color: #111827; font-size: 1.65rem; font-weight: 400; line-height: .8; margin-left: 1rem; } .mobile-menu .fd-menu-cta::after { content: none; } .mobile-menu .fd-pan-theme { border-radius: 24px; padding: 5.5rem 1.5rem 1.5rem; } } /* 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; } /* ══════════════════════════════════════════════════════════════════════ BURGER MOBILE — PANNEAU MEDVI UNIFORME Panneau latéral droit à 70vw, espace visible à gauche et vraie coulisse. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .site-header.fd-menu-open::before { content: ''; position: fixed; inset: 0; background: rgba(15,23,42,.16); z-index: 898; } .site-header.fd-menu-open .header-content { position: fixed !important; inset: 0 0 auto; height: 64px !important; padding: .85rem 1.25rem !important; z-index: 1002; pointer-events: none; } .site-header.fd-menu-open .logo-text { opacity: 0 !important; } .site-header.fd-menu-open .logo-text, .site-header.fd-menu-open .hamburger { pointer-events: auto; } .site-header.fd-menu-open .hamburger { position: fixed !important; top: 22px; right: 18px; color: #111827 !important; width: 28px; height: 28px; padding: 0; } .mobile-menu, .mobile-menu.open { display: flex !important; flex-direction: column; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 90vw !important; max-width: 360px !important; height: 100dvh !important; padding: 1.55rem 1.45rem 1.15rem !important; background: #fff !important; border: 0 !important; border-radius: 22px 0 0 22px !important; box-shadow: -14px 0 34px rgba(15,23,42,.18) !important; overflow: hidden !important; z-index: 899 !important; visibility: visible !important; opacity: 1 !important; transform: translateX(0) !important; transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .22s ease !important; } .mobile-menu:not(.open) { display: flex !important; visibility: hidden !important; opacity: 0 !important; transform: translateX(105%) !important; pointer-events: none !important; } .mobile-menu::before { content: 'MENU'; display: block; flex: 0 0 auto; margin: .05rem 0 1.55rem !important; color: #111827; font-family: 'Sora',Arial,sans-serif; font-size: 1rem !important; font-weight: 800; letter-spacing: .035em; } .mobile-menu .fd-pan-principal { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; flex-direction: column; gap: 0 !important; padding: 0; } .mobile-menu .fd-pan-principal > a, .mobile-menu .fd-pan-principal > button { min-height: 42px !important; padding: .63rem 0 !important; color: #374151 !important; font-size: .9rem !important; font-weight: 500 !important; line-height: 1.25; text-decoration: none; border: 0 !important; border-radius: 0; background: transparent !important; } .mobile-menu .fd-pan-principal > a:not(.fd-menu-cta)::after { content: '›' !important; float: right; color: #111827; font-size: 1.35rem !important; font-weight: 400; line-height: .7; margin-left: auto !important; } .mobile-menu .fd-pan-principal > a { display: flex; align-items: center; gap: .55rem; } .mobile-menu .fd-menu-ico { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: 0 0 17px; color: #374151; } .mobile-menu .fd-menu-ico svg { width: 16px; height: 16px; } .mobile-menu .fd-menu-cta { justify-content: flex-start !important; margin: 0 !important; padding-left: 0 !important; color: #374151 !important; font-size: .9rem !important; font-weight: 500 !important; } .mobile-menu .fd-pan-principal > a.active-link { padding-left: .55rem !important; padding-right: .55rem !important; border-radius: 7px !important; background: #f1f3f5 !important; color: #111827 !important; font-weight: 700 !important; } .mobile-menu .fd-menu-cta svg { display: block; width: 16px; height: 16px; } .mobile-menu .fd-menu-compte { font-weight: 500 !important; } .mobile-menu .fd-menu-theme-row { color: #374151 !important; font-size: .9rem !important; font-weight: 500 !important; } .mobile-menu .fd-menu-trait { margin: .45rem 0 !important; background: #edf0f2; } .mobile-menu .fd-menu-theme-row { margin-top: .2rem !important; justify-content: space-between; width: 100%; border-top: 1px solid #edf0f2; } .mobile-menu .fd-pan-theme { position: absolute; inset: 0; z-index: 2; padding: 1.55rem 1.45rem 1.15rem !important; border-radius: 22px 0 0 22px; background: #fff; transform: translateX(100%); } .mobile-menu.fd-voir-theme .fd-pan-theme { transform: translateX(0); } .mobile-menu.fd-voir-theme .fd-pan-principal { transform: translateX(-100%); } .fd-menu-foot { display: flex !important; flex: 0 0 auto; gap: 1.2rem; border-top: 1px solid #edf0f2; margin-top: .6rem; padding: 1rem 0 .1rem; } .fd-menu-foot a { display: flex; align-items: flex-start; gap: .45rem; flex: 1; color: #374151; text-decoration: none; font-family: 'Sora',sans-serif; font-size: .63rem; line-height: 1.35; } .fd-menu-foot-ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: #111827; font-size: 1.05rem; line-height: 1; } .fd-menu-foot-ico svg { width: 16px; height: 16px; } } /* FD MENU CANONICAL — règles finales communes aux cinq pages. */ @media (max-width: 768px) { .fd-menu-canonical { position:fixed !important; inset:0 0 0 auto !important; width:90vw !important; max-width:360px !important; height:100dvh !important; padding:0 1.45rem 1.15rem !important; display:flex !important; flex-direction:column !important; gap:0 !important; border:0 !important; border-radius:22px 0 0 22px !important; background:#fff !important; box-shadow:-14px 0 34px rgba(15,23,42,.18) !important; overflow:hidden !important; z-index:1003 !important; transform:translateX(105%) !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .22s ease,visibility 0s linear .32s !important; } .fd-menu-canonical.open { transform:translateX(0) !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; transition-delay:0s !important; } .fd-menu-canonical::before { display:none !important; content:none !important; } .fd-menu-head { display:flex !important; align-items:center !important; justify-content:space-between !important; flex:0 0 72px !important; border-bottom:1px solid #edf0f2 !important; } .fd-menu-brand { display:inline-flex !important; color:#111827 !important; font-family:'Sora',Arial,sans-serif !important; font-size:1.02rem !important; font-weight:800 !important; letter-spacing:.035em !important; text-decoration:none !important; } .fd-menu-close { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:36px !important; height:36px !important; padding:0 !important; border:0 !important; border-radius:10px !important; background:#f1f3f5 !important; color:#111827 !important; cursor:pointer !important; } .fd-menu-close svg { width:18px !important; height:18px !important; } .fd-menu-canonical .fd-pan-principal { display:flex !important; flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; flex-direction:column !important; gap:0 !important; padding:1.05rem 0 0 !important; } .fd-menu-canonical .fd-pan-principal > a, .fd-menu-canonical .fd-pan-principal > button { display:flex !important; align-items:center !important; width:100% !important; min-height:44px !important; box-sizing:border-box !important; margin:0 !important; padding:.62rem .1rem !important; border:0 !important; border-radius:7px !important; background:transparent !important; color:#374151 !important; font-family:'Sora',Arial,sans-serif !important; font-size:.92rem !important; font-weight:500 !important; line-height:1.25 !important; text-align:left !important; text-decoration:none !important; } .fd-menu-canonical .fd-pan-principal > a:not(.fd-menu-cta)::after { content:'›' !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:20px !important; height:20px !important; margin-left:auto !important; color:#111827 !important; font-family:Arial,sans-serif !important; font-size:1.42rem !important; font-weight:400 !important; line-height:1 !important; } .fd-menu-canonical .fd-menu-theme-arrow { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:20px !important; height:20px !important; margin-left:auto !important; color:#111827 !important; font-size:1.42rem !important; font-weight:400 !important; } .fd-menu-canonical .fd-menu-ico { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:20px !important; height:20px !important; margin-right:.62rem !important; flex:0 0 20px !important; color:#374151 !important; } .fd-menu-canonical .fd-menu-ico svg, .fd-menu-canonical .fd-menu-foot-ico svg { width:17px !important; height:17px !important; } .fd-menu-canonical .fd-menu-cta { min-height:46px !important; margin-bottom:.22rem !important; padding:.72rem .1rem !important; color:#111827 !important; font-weight:700 !important; } .fd-menu-canonical .fd-menu-cta::after { display:none !important; content:none !important; } .fd-menu-canonical .active-link { padding-left:.55rem !important; padding-right:.55rem !important; background:#f1f3f5 !important; color:#111827 !important; font-weight:700 !important; } .fd-menu-canonical .fd-menu-trait { width:100% !important; height:1px !important; margin:.45rem 0 !important; background:#edf0f2 !important; flex:0 0 1px !important; } .fd-menu-canonical .fd-menu-theme-row { justify-content:space-between !important; } .fd-menu-canonical .fd-menu-theme-left { display:inline-flex !important; align-items:center !important; } .fd-menu-canonical .fd-menu-foot { display:flex !important; flex:0 0 auto !important; gap:1.2rem !important; margin-top:.6rem !important; padding:1rem 0 .1rem !important; border-top:1px solid #edf0f2 !important; } .fd-menu-canonical .fd-menu-foot a { display:flex !important; align-items:flex-start !important; gap:.45rem !important; flex:1 1 0 !important; padding:0 !important; color:#374151 !important; font-family:'Sora',Arial,sans-serif !important; font-size:.66rem !important; font-weight:500 !important; line-height:1.35 !important; text-decoration:none !important; } .fd-menu-canonical .fd-menu-foot-ico { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:17px !important; height:17px !important; flex:0 0 17px !important; color:#111827 !important; } } /* Le panneau est une couche au-dessus : le header d'origine reste visible dans la partie gauche et ne doit jamais être masqué à l'ouverture. */ @media (max-width: 768px) { .site-header.fd-menu-open::before { display: none !important; content: none !important; } .site-header.fd-menu-open .logo-text { opacity: 1 !important; visibility: visible !important; } .site-header.fd-menu-open { z-index: 1002 !important; } .fd-menu-canonical { z-index: 1003 !important; } } /* CORRECTION MENU30 : le header reste totalement indépendant du panneau. */ @media (max-width: 768px) { .site-header.fd-menu-open, .site-header.fd-menu-open .header-content, .site-header.fd-menu-open .header-search, .site-header.fd-menu-open .logo-text, .site-header.fd-menu-open .hamburger { position: initial !important; inset: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .site-header.fd-menu-open { position: fixed !important; } .site-header.fd-menu-open .header-content { position: relative !important; } .fd-menu-canonical { z-index: 1003 !important; } } /* Éléments réservés aux comptes connectés : le display:flex du menu ne doit jamais annuler leur masquage quand le visiteur est déconnecté. */ @media (max-width: 768px) { .fd-menu-canonical .fd-account-only-hidden { display: none !important; } } /* MENU FINAL : panneau net, croix interne, arrière-plan flouté et verrouillé. */ @media (max-width: 768px) { body:has(.fd-menu-canonical.open) { overflow: hidden !important; } body:has(.fd-menu-canonical.open)::before { content: '' !important; position: fixed !important; inset: 0 !important; z-index: 1001 !important; background: rgba(15,23,42,.10) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; pointer-events: auto !important; } .fd-menu-canonical, .fd-menu-canonical.open { border-radius: 22px 0 0 0 !important; box-shadow: none !important; z-index: 1003 !important; } .fd-menu-canonical .fd-menu-head { display: flex !important; align-items: center !important; justify-content: space-between !important; flex: 0 0 72px !important; border-bottom: 1px solid #edf0f2 !important; } .fd-menu-canonical .fd-menu-brand { display: inline-flex !important; color: #111827 !important; font-family: 'Sora', Arial, sans-serif !important; font-size: 1.02rem !important; font-weight: 800 !important; letter-spacing: .035em !important; } .fd-menu-canonical .fd-menu-close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: #f1f3f5 !important; color: #111827 !important; cursor: pointer !important; } .fd-menu-canonical .fd-menu-close svg { width: 18px !important; height: 18px !important; } .fd-menu-canonical .fd-account-only-hidden, .fd-menu-canonical #fdMenuCommandes[style*="display:none"], .fd-menu-canonical #fdHeaderLogoutMobile[style*="display:none"] { display: none !important; } } /* BLUR FINAL : le voile doit couvrir le header/recherche, mais jamais le panneau blanc lui-même. Le panneau est isolé dans son propre calque. */ @media (max-width: 768px) { .site-header.fd-menu-open, .site-header.fd-menu-open .header-content, .site-header.fd-menu-open .header-search { z-index: auto !important; } .site-header.fd-menu-open { position: fixed !important; } .site-header.fd-menu-open .header-content { position: relative !important; } body:has(.fd-menu-canonical.open)::before { bottom: auto !important; height: 100lvh !important; min-height: 100vh !important; z-index: 1001 !important; backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; background: rgba(15,23,42,.08) !important; } .fd-menu-canonical, .fd-menu-canonical.open { isolation: isolate !important; z-index: 1003 !important; background: #fff !important; opacity: 1 !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* Verrouillage tactile universel : iOS et Android ne doivent pas faire glisser la page derrière le panneau ouvert. Le panneau reste défilable si nécessaire. */ @media (max-width: 768px) { html.fd-mobile-menu-lock, body.fd-mobile-menu-lock { overscroll-behavior: none !important; } .fd-menu-canonical.open { touch-action: pan-y !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } } /* Calque DOM dédié : il reste au-dessus de toute la page, y compris sous la barre Safari/Android, et juste sous le panneau du burger. */ @media (max-width: 768px) { body:has(.fd-menu-canonical.open)::before { display: none !important; } .fd-menu-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 100vw !important; height: 100lvh !important; min-height: 100vh !important; z-index: 1001 !important; display: block !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; background: rgba(15,23,42,.10) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; transition: opacity .18s ease, visibility .18s ease !important; } .fd-menu-overlay.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .fd-menu-canonical, .fd-menu-canonical.open { z-index: 1003 !important; } } /* Burger : action principale en bas et fermeture réduite à une simple croix. */ @media (max-width: 768px) { .fd-menu-canonical .fd-menu-close { width: 32px !important; height: 32px !important; border-radius: 0 !important; background: transparent !important; color: #111827 !important; } .fd-menu-canonical .fd-menu-close:hover, .fd-menu-canonical .fd-menu-close:focus-visible { background: transparent !important; outline: none !important; } .fd-menu-canonical .fd-menu-foot { display: block !important; margin-top: .6rem !important; padding: .8rem 0 .15rem !important; } .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: .72rem .1rem !important; color: #111827 !important; font-size: .92rem !important; font-weight: 700 !important; text-decoration: none !important; } .fd-menu-canonical .fd-menu-foot-cta svg { display: block !important; width: 17px !important; height: 17px !important; margin-right: .62rem !important; } .fd-menu-canonical .fd-menu-foot-cta::after { display: none !important; content: none !important; } } /* Burger : même CTA que la barre sticky mobile, et flèches sur une colonne fixe. */ @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a:not(.fd-menu-cta) { position: relative !important; padding-right: 2rem !important; } .fd-menu-canonical .fd-pan-principal > a:not(.fd-menu-cta)::after { position: absolute !important; right: .1rem !important; top: 50% !important; transform: translateY(-50%) !important; margin-left: 0 !important; } .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta { justify-content: center !important; gap: .6rem !important; width: 100% !important; height: 48px !important; min-height: 48px !important; box-sizing: border-box !important; background: #1A50CC !important; color: #fff !important; border-radius: 14px !important; padding: 0 1.5rem !important; text-align: center !important; font-size: 1rem !important; font-weight: 700 !important; } .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta:hover { background:#153FB5 !important; color:#fff !important; } .fd-menu-canonical .fd-menu-foot-cta svg { width:18px !important; height:18px !important; margin-right:0 !important; } } /* Le texte du CTA reste centré, mais son icône reprend la colonne des autres SVG du menu pour un alignement visuel continu. */ @media (max-width: 768px) { .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta { position: relative !important; gap: 0 !important; } .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta > svg { position: absolute !important; left: .55rem !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta > span { display: block !important; width: 100% !important; text-align: center !important; } } /* Correction ciblée : l'icône de la ligne active Accueil doit rester dans la même colonne que les autres ; le CTA bleu garde son icône centrée. */ @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a.active-link { padding-left: .1rem !important; padding-right: 2rem !important; } .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta { position: static !important; gap: .6rem !important; } .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta > svg { position: static !important; transform: none !important; width: 18px !important; height: 18px !important; margin: 0 !important; } .fd-menu-canonical .fd-menu-foot .fd-menu-foot-cta > span { display: inline !important; width: auto !important; text-align: inherit !important; } } /* Icône du thème courant : même gris doux que les autres icônes du burger. */ @media (max-width: 768px) { .fd-menu-canonical #fdMenuThemeIcone, .fd-menu-canonical #fdMenuThemeIcone svg { color: #9ca3af !important; } .fd-menu-canonical #fdMenuThemeIcone svg, .fd-menu-canonical #fdMenuThemeIcone svg * { stroke: #9ca3af !important; fill: none !important; } } /* Retour au SVG d'origine du thème (cercle moitié rempli) ; les autres icônes reprennent le même gris foncé pour un ensemble uniforme. */ @media (max-width: 768px) { .fd-menu-canonical .fd-menu-ico, .fd-menu-canonical #fdMenuThemeIcone { color: #374151 !important; } .fd-menu-canonical #fdMenuThemeIcone svg { color: #374151 !important; fill: none !important; stroke: currentColor !important; } .fd-menu-canonical #fdMenuThemeIcone svg circle { fill: none !important; stroke: currentColor !important; } .fd-menu-canonical #fdMenuThemeIcone svg path { fill: currentColor !important; stroke: none !important; } } /* Surlignage de la page active : légèrement plus large que le contenu pour respirer à gauche et à droite, tout en gardant les icônes alignées. */ @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a.active-link { width: calc(100% + .9rem) !important; margin-left: -.45rem !important; padding-left: 1rem !important; padding-right: 2.45rem !important; } } /* Le lien actif garde la largeur normale ; seul son fond déborde légèrement. */ @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a.active-link { position: relative !important; width: 100% !important; margin-left: 0 !important; padding-left: .1rem !important; padding-right: 2rem !important; background: transparent !important; } .fd-menu-canonical .fd-pan-principal > a.active-link::before { content: '' !important; position: absolute !important; z-index: 0 !important; left: -.45rem !important; right: -.45rem !important; top: 0 !important; bottom: 0 !important; border-radius: 7px !important; background: #f1f3f5 !important; } .fd-menu-canonical .fd-pan-principal > a.active-link > * { position: relative !important; z-index: 1 !important; } .fd-menu-canonical .fd-pan-principal > a.active-link::after { z-index: 1 !important; } } @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a.active-link { z-index: 0 !important; } .fd-menu-canonical .fd-pan-principal > a.active-link::before { z-index: -1 !important; } } /* Menu mobile : aucun défilement horizontal ; le sous-menu Thème reprend exactement les espacements et la typographie du menu principal. */ @media (max-width: 768px) { .fd-menu-canonical, .fd-menu-canonical .fd-pan-principal, .fd-menu-canonical .fd-pan-theme { overflow-x: hidden !important; } .fd-menu-canonical .fd-pan-theme { display: flex !important; flex-direction: column !important; box-sizing: border-box !important; padding: 1.05rem 0 1.15rem !important; } .fd-menu-canonical .fd-pan-theme .fd-pan-retour { display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; margin: 0 0 .45rem !important; padding: .62rem .1rem !important; border: 0 !important; background: transparent !important; color: #374151 !important; font-family: 'Sora', Arial, sans-serif !important; font-size: .92rem !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: left !important; } .fd-menu-canonical .fd-pan-theme .fd-pan-retour svg { width: 20px !important; height: 20px !important; margin-right: .62rem !important; flex: 0 0 20px !important; } .fd-menu-canonical #fdMenuThemeListe { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; } .fd-menu-canonical #fdMenuThemeListe .fd-theme-opt { display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; box-sizing: border-box !important; margin: 0 !important; padding: .62rem .1rem !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #374151 !important; font-family: 'Sora', Arial, sans-serif !important; font-size: .92rem !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: left !important; } .fd-menu-canonical #fdMenuThemeListe .fd-theme-opt svg { width: 20px !important; height: 20px !important; margin-right: .62rem !important; flex: 0 0 20px !important; } .fd-menu-canonical #fdMenuThemeListe .fd-theme-opt.actif { background: #f1f3f5 !important; color: #111827 !important; font-weight: 700 !important; } } /* Finitions demandées : même rayon pour le thème sélectionné, croix alignée avec le burger, et feuille A4 blanche à bordure très fine. */ @media (max-width: 768px) { .fd-menu-canonical .fd-menu-close { margin-right: -.45rem !important; } .fd-menu-canonical #fdMenuThemeListe .fd-theme-opt.actif { border-radius: 7px !important; } } /* Dernières finitions mobile : voile sur toute la hauteur utile, titre du panneau aligné avec le burger, et sous-menu Thème aligné sur le menu. */ @media (max-width: 768px) { .fd-menu-overlay, .fd-menu-overlay.open { inset: 0 !important; width: 100vw !important; height: 100dvh !important; min-height: 100vh !important; bottom: 0 !important; background: rgba(15,23,42,.16) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } .fd-menu-canonical .fd-menu-head { position: relative !important; top: -18px !important; margin-bottom: -18px !important; } .fd-menu-canonical .fd-pan-theme { padding-left: 1.45rem !important; padding-right: 1.45rem !important; } .fd-menu-canonical .fd-pan-theme .fd-pan-retour, .fd-menu-canonical #fdMenuThemeListe .fd-theme-opt { padding-left: .1rem !important; padding-right: .1rem !important; } } /* Accueil actif : coins arrondis visibles comme sur le sélecteur de thème. */ @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a.active-link { overflow: visible !important; border-radius: 8px !important; } .fd-menu-canonical .fd-pan-principal > a.active-link::before { left: -.45rem !important; right: -.45rem !important; top: 2px !important; bottom: 2px !important; border-radius: 8px !important; } } /* Surlignage Accueil définitif : vrai fond arrondi étendu par une ombre, plutôt qu'un pseudo-élément qui rendait les coins quasi invisibles. */ @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a.active-link { background: #f1f3f5 !important; border-radius: 8px !important; box-shadow: 0 0 0 .45rem #f1f3f5 !important; z-index: 0 !important; } .fd-menu-canonical .fd-pan-principal > a.active-link::before { display: none !important; content: none !important; } } @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a.active-link { background: #f1f3f5 !important; border-radius: 9px !important; box-shadow: none !important; outline: .45rem solid #f1f3f5 !important; outline-offset: 0 !important; } } /* Accueil : retour à la largeur normale du menu ; seule la forme arrondie est conservée. */ @media (max-width: 768px) { .fd-menu-canonical .fd-pan-principal > a.active-link { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: .1rem !important; padding-right: 2rem !important; background: #f1f3f5 !important; border-radius: 8px !important; box-shadow: none !important; outline: none !important; } .fd-menu-canonical .fd-pan-principal > a.active-link::before { display: none !important; content: none !important; } } /* Voile burger inspiré du comportement MedVi : calque fixe pleine page, sombre et translucide, sous le panneau. Le blur réel reste actif pour flouter le site visible derrière la barre Safari. */ @media (max-width: 768px) { .fd-menu-overlay, .fd-menu-overlay.open { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100dvh !important; z-index: 1001 !important; background: rgba(0,0,0,.50) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } .fd-menu-overlay.open { opacity: 1 !important; visibility: visible !important; } html.fd-mobile-menu-lock, body.fd-mobile-menu-lock { background: #0f172a !important; } } /* Rendu MedVi : voile sombre translucide sans flou CSS supplémentaire. */ @media (max-width: 768px) { .fd-menu-overlay, .fd-menu-overlay.open { background: rgba(0,0,0,.50) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* MedVi strict : aucun flou résiduel, uniquement le voile noir translucide. */ @media (max-width: 768px) { body:has(.fd-menu-canonical.open)::before, body:has(.fd-menu-canonical.open)::after, .fd-menu-overlay, .fd-menu-overlay.open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; } body:has(.fd-menu-canonical.open)::before, body:has(.fd-menu-canonical.open)::after { display: none !important; content: none !important; } .fd-menu-overlay, .fd-menu-overlay.open { background: rgba(0,0,0,.50) !important; } } /* Le voile laisse le contenu réel visible derrière le menu, comme demandé. */ @media (max-width: 768px) { .fd-menu-overlay, .fd-menu-overlay.open { background: rgba(0,0,0,.28) !important; } } /* Recherche globale : même logique que la vue liste du catalogue. Une vraie miniature pour les produits illustrés, emoji sinon. */ .header-search-result-icon.has-thumb { background:#fff !important; border:1px solid rgba(31,41,55,.18); border-radius:2px; overflow:hidden; } .header-search-result-thumb { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; background:#fff; } /* Voile burger naturel : le site reste visible, légèrement assombri, sans fond bleu/noir forcé ni rendu « négatif ». */ @media (max-width: 768px) { html.fd-mobile-menu-lock, body.fd-mobile-menu-lock { background: transparent !important; } .fd-menu-overlay, .fd-menu-overlay.open { background: rgba(0,0,0,.18) !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }