/* =========================================================================== header_mobile.css --------------------------------------------------------------------------- En-tete mobile COMMUN a toutes les pages du site (logo, menu principal, menu secondaire, sous-menus). TROIS SEUILS DISTINCTS --------------------------------------------------------------------------- <= 1449px REORGANISATION Le menu passe a la ligne, le logo se centre, les sous-menus s'ouvrent sous leur parent. Necessaire des que la mise en page desktop se tasse. 992-1449px DESOLIDARISATION DU CONTENU #content porte min-width:1450px (css/default.css) : le document est plus large que la fenetre et defile. Le header, lui, doit rester cale sur la FENETRE, pas sur le document. Voir section 2. <= 767px MASQUAGE DES ENTREES Optical software / Use cases / AI interface / connexion. Uniquement sur vrai mobile, ou ces outils sont inutilisables. Entre 768 et 1449px -- tablettes, portables -- la mise en page est adaptee MAIS l'utilisateur garde l'acces complet aux services. PORTEE : au-dessus de 1449px, AUCUNE regle ne s'applique. A INCLURE sur toute page devant avoir l'en-tete mobile. Appele par css/cssHeaderMobile.php =========================================================================== */ /* =========================================================================== 1. REORGANISATION <= 1449px =========================================================================== */ @media (max-width: 1449px) { /* --------------------------------------------------------------------------- LARGEUR ET CENTRAGE --------------------------------------------------------------------------- ATTENTION : ne JAMAIS mettre overflow sur .header ni sur .main-menu. Les menus deroulants (.dropdown-content, .submenu) sont en position:absolute et sortent de leur conteneur. Tout overflow different de visible les rognerait : "Handy calculations" ne se deroulerait plus. On limite donc la largeur SANS toucher a l'overflow : le menu passe a la ligne (flex-wrap) au lieu de s'etaler. Sans cela, .main-menu porte min-width:max-content (software_header.css), s'etale sur 1105px et elargit tout le document -- scrollWidth 1392 pour un ecran de 375, avec tout le contenu plaque a gauche. --------------------------------------------------------------------------- */ .menu-wrapper-general .header { flex-wrap: wrap; max-width: 100vw; justify-content: center; gap: 10px; } /* Le logo prend toute la largeur et son image est centree dedans (software_header.css lui applique margin-right:17vw sous 1250px). */ .menu-wrapper-general .logo { flex: 0 0 100%; display: flex; justify-content: center; margin-bottom: 8px; } .menu-wrapper-general .logo img { margin: 0 !important; } /* .main-menu et .secondary-menu sont deux blocs distincts sur la meme ligne : le gap du .header supprime l'ecart qui les faisait paraitre decentres. */ .menu-wrapper-general .main-menu { min-width: 0 !important; max-width: 100%; flex: 0 1 auto; flex-wrap: wrap; justify-content: center; margin: 0; } .menu-wrapper-general .secondary-menu { max-width: 100%; flex: 0 1 auto; justify-content: center; margin: 0; } .menu-wrapper-general .menu-button { white-space: normal; flex-shrink: 1; } .menu-wrapper-general .search-box, .menu-wrapper-general .form-inline { max-width: 100%; } .menu-wrapper-general .search-box input { min-width: 0; width: 100%; } /* --------------------------------------------------------------------------- ORGANISATION EN LIGNES --------------------------------------------------------------------------- ligne 1 : logo ligne 2 : Handy calculations + recherche ligne 3 : Optical software / Use cases / AI interface ligne 4 : icones du menu secondaire Les sauts de ligne sont obtenus par des pseudo-elements de largeur 100%, sans ajouter de balise au HTML. Les valeurs d'order sont espacees pour qu'aucune collision ne soit possible. --------------------------------------------------------------------------- */ .menu-wrapper-general .main-menu { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: 100%; } /* Ligne 2 */ .menu-wrapper-general .main-menu > .dropdown { order: 10; flex: 0 0 auto; } .menu-wrapper-general .main-menu > .search-box { order: 20; display: flex; flex-wrap: nowrap; /* champ et bouton restent cote a cote */ align-items: stretch; flex: 0 1 auto; max-width: 55%; } /* Le champ se comprime, le bouton garde sa taille : sans flex-shrink sur l'input, le bouton etait repousse sur une seconde ligne. */ .menu-wrapper-general .main-menu > .search-box input { flex: 1 1 auto; min-width: 0; width: auto; } .menu-wrapper-general .main-menu > .search-box button { flex: 0 0 auto; white-space: nowrap; } /* Saut de ligne avant les trois boutons */ .menu-wrapper-general .main-menu::after { content: ""; order: 30; flex: 0 0 100%; height: 0; margin: 0; padding: 0; } /* Ligne 3 */ .menu-wrapper-general .main-menu > #softwareButton { order: 40; margin-left: 0 !important; } .menu-wrapper-general .main-menu > #solversButton { order: 41; margin-left: 0 !important; } .menu-wrapper-general .main-menu > #aiInterfaceButton { order: 42; margin-left: 0 !important; } /* Ligne 4 */ .menu-wrapper-general .secondary-menu { flex: 0 0 100%; justify-content: center; } } /* =========================================================================== 2. DESOLIDARISATION DU CONTENU 992 - 1449px --------------------------------------------------------------------------- PROBLEME css/default.css applique min-width:1450px a #content : entre 992 et 1449px, le document est plus large que la fenetre et defile horizontalement. C'est voulu pour le CONTENU, dont les proportions desktop doivent etre preservees. Mais le header herite de cette largeur : mesures a 1150px, le document fait 1450 et le header aussi. Son justify-content:center le centre donc dans 1450px, dont l'utilisateur ne voit que les 1150 premiers -- d'ou un menu qui parait pousse vers la droite avec un vide a gauche. SOLUTION position:sticky + left:0 + width:100vw sortent le header du flux elargi : il reste cale sur la FENETRE et ne defile pas avec le contenu. Le centrage se calcule alors sur la largeur visible. Sous 992px, le CSS mobile fait tenir tout le contenu dans l'ecran : le document ne deborde plus et cette regle devient inutile. =========================================================================== */ @media (min-width: 992px) and (max-width: 1449px) { .menu-wrapper-general { position: sticky; left: 0; width: 100vw; max-width: 100vw; min-width: 0; z-index: 100; background: #fff; } .menu-wrapper-general .header { width: 100%; max-width: 100vw; min-width: 0; margin-left: 0; margin-right: 0; } } /* =========================================================================== 3. MASQUAGE DES ENTREES <= 767px --------------------------------------------------------------------------- Le logiciel optique, les use cases et l'interface IA ne sont pas utilisables sur un ecran de telephone ; la recherche non plus (le menu "Handy calculations" suffit a la navigation). Seuil abaisse a 767px : entre 768 et 1449px (tablettes en paysage, petits portables), ces outils restent parfaitement utilisables. Les masquer y priverait l'utilisateur de services auxquels il a droit. #menuIconButton (Informations) reste toujours affiche. SEO : display:none seulement. Les liens restent dans le HTML, donc Google les voit et les suit. Le maillage interne est preserve. =========================================================================== */ @media (max-width: 767px) { .menu-wrapper-general #softwareButton, .menu-wrapper-general #solversButton, .menu-wrapper-general #aiInterfaceButton, .menu-wrapper-general #userButton, .menu-wrapper-general .main-menu > .search-box { display: none; } } /* Le panneau #secondaryMenu est en position:absolute avec right:0, mais son conteneur .secondary-dropdown est en position:static : l'absolu se cale alors sur .secondary-menu (position:relative) et part au bord droit de la page, loin de l'icone qui le declenche. position:relative sur le conteneur ramene le panneau sous son icone. */ .menu-wrapper-general .secondary-dropdown { position: relative; } /* software_header.css et software_headerBase.css declarent right:0 sur ce panneau, avec la meme specificite que cette regle : celui charge en dernier l'emporte, d'ou un left calcule a -102px (48px d'icone moins 150 de panneau) et ma regle sans effet. !important tranche, et left:50% + translateX(-50%) centre le panneau sur l'icone. */ .menu-wrapper-general .secondary-dropdown .secondary-dropdown-content { right: auto !important; left: 50% !important; transform: translateX(-50%) !important; } /* Aucune regle de survol n'existe sur .secondary-item : seul l'etat .selected est defini (#004a99 dans software_header.css). On ajoute un fond au survol, dans une teinte plus claire que la selection. */ .menu-wrapper-general .secondary-dropdown-content a.secondary-item:hover { background: #e8eef5; } /* --------------------------------------------------------------------------- Page "Use cases" : hierarchie des tailles --------------------------------------------------------------------------- Mesures a 800px : les liens .niveau1 font 24px contre 16.8 pour les titres de section h2.text-title -- la hierarchie est inversee, les liens paraissent plus importants que les sections qui les contiennent. Sous 992px, on ramene les liens sous la taille des titres. --------------------------------------------------------------------------- */ @media (max-width: 992px) { a.niveau1 { font-size: 16px; line-height: 1.4; } } /* =========================================================================== MENU DEROULANT ET SOUS-MENUS -- TOUTES LARGEURS --------------------------------------------------------------------------- Ce bloc etait dans @media (max-width: 1449px) : au-dessus, les sous-menus s'ouvraient a droite du parent au survol. Deux modes d'affichage a maintenir en coherence pour un gain discutable -- le mode "dans le flux, au clic" convient aux deux, et il est le seul utilisable au doigt. Sorti de la media query : il s'applique desormais quelle que soit la largeur. Voir aussi class/software_javascript.php, ou le survol a ete neutralise en consequence. =========================================================================== */ /* --------------------------------------------------------------------------- MENU DEROULANT ET SOUS-MENUS --------------------------------------------------------------------------- Sur desktop les sous-menus s'ouvrent A DROITE du parent (left:100%, soit 200px). Sur 375px de large, le sous-menu se termine a 415px et deborde de 40px. Sur mobile, position:static le remet dans le flux : il s'affiche SOUS son entree parente, avec un lisere et un retrait pour marquer la hierarchie. --------------------------------------------------------------------------- */ .menu-wrapper-general .dropdown-content { max-height: 70vh; overflow-y: auto; min-width: 0; /* calc(100vw - 20px) convient a 375px mais donnait 1180px a 1200px d'ecran : le menu occupait presque toute la largeur. */ width: calc(100vw - 20px); max-width: 420px; left: 0; } /* Le sous-menu s'affiche SOUS son entree parente, dans le flux, avec un lisere et un retrait pour marquer la hierarchie. Un fond bleute a 10% -- le bleu du bouton "Handy calculations" -- le distingue du menu primaire. Une version anterieure declarait ce selecteur deux fois, ce qui perturbait la police et la largeur : tout est regroupe ici. */ .menu-wrapper-general .submenu { position: static; left: auto; top: auto; min-width: 0; width: 100%; box-shadow: none; border-left: 2px solid #004a99; border-radius: 0; margin-left: 12px; white-space: normal; background: rgba(0, 123, 255, 0.10) !important; } /* Le survol n'ouvre plus les sous-menus : ils s'inserent dans le flux et poussaient les entrees suivantes vers le bas au fur et a mesure que la souris descendait, rendant les dernieres inatteignables. L'ouverture se fait au clic, un seul sous-menu a la fois -- voir class/software_javascript.php. */ .menu-wrapper-general .dropdown-submenu:hover > .submenu { display: none; } .menu-wrapper-general .dropdown-submenu.active > .submenu { display: block; } /* Chevron indiquant l'etat du sous-menu. */ .menu-wrapper-general .dropdown-submenu > a::after { content: " \25B8"; float: right; } .menu-wrapper-general .dropdown-submenu.active > a::after { content: " \25BE"; }