/* sf-header — correctifs d'affichage. Le reste du header est écrit en styles inline dans module.html ; ce fichier ne corrige que ce qui pose problème. */ /* Le logo est un élément flex : par défaut il accepte de rétrécir, et c'est lui qui cède quand le bouton d'appel à l'action ne peut pas se compresser. Résultat en mobile : un logo réduit à quelques pixels. Il ne doit jamais céder — c'est au reste de s'adapter. */ .sf-headnav .sf-brand { flex: 0 0 auto !important; } .sf-headnav .sf-brand img { width: auto !important; max-width: none !important; } @media (max-width: 760px) { /* 34 px de padding de chaque côté, c'est 68 px pris sur un écran de 375. */ .sf-headnav { padding: 0 16px !important; gap: 12px !important; } .sf-headnav .sf-brand img { height: 28px !important; } /* Le CTA se compresse et tronque plutôt que de pousser le logo dehors. */ .sf-headnav .sf-cta-flame { min-width: 0; padding-left: 16px !important; padding-right: 16px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 400px) { /* Sous 400 px, la flèche du CTA n'apporte rien et coûte de la place. */ .sf-headnav .sf-cta-flame svg { display: none; } } /* --- tiroir mobile : pourquoi il vit hors du

------------ Le header porte backdrop-filter pour son effet de verre. Or backdrop-filter crée un bloc conteneur pour les descendants en position:fixed — exactement comme transform ou filter. Le tiroir, qui est fixed et décalé de translateX(100%), se positionnait donc par rapport au header et non à la fenêtre : il partait hors du document, élargissait la page et devenait visible à droite. Il est désormais frère du header. Ces règles sont une ceinture de sécurité si quelqu'un le remet dedans un jour. */ .sf-mobile-drawer { will-change: transform; } .sf-mobile-drawer:not(.is-open) { visibility: hidden; pointer-events: none; } .sf-mobile-drawer.is-open { visibility: visible; pointer-events: auto; } /* Le voile ne doit jamais capter le clic quand il est fermé. */ .sf-mobile-scrim:not(.is-open) { pointer-events: none; } /* --- pourquoi le header ne collait pas -------------------------- position:sticky est contraint par le bloc conteneur, c'est-à-dire la boîte du parent. Or le

est fils unique de deux

qui n'ont que sa hauteur : l'enveloppe du catalogue et le conteneur de module généré par HubSpot. Le header n'avait donc aucune marge de déplacement — il « collait » à un conteneur de 70 px de haut. display:contents retire ces deux boîtes du rendu sans toucher au DOM : le bloc conteneur du header redevient , et il colle sur toute la hauteur de la page. */ .hs_cos_wrapper:has(> .sn-legacy > .sf-headbar), .sn-legacy:has(> .sf-headbar) { display: contents; } /* Repli pour les navigateurs sans :has() — le header passe en fixe, avec une compensation de hauteur sur le contenu qui suit. */ @supports not selector(:has(*)) { .sf-headbar { position: fixed !important; left: 0; right: 0; } body { padding-top: 70px; } }