/* ========================================================================== NEXUS — Reset, éléments de base et composants partagés ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--nx-font-body); font-size: var(--nx-text-base); line-height: var(--nx-leading-body); color: var(--nx-ink); background: var(--nx-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } /* Titres — display, resserrés, jamais justifiés. Le site d'origine justifiait 22 éléments : rivières blanches garanties. */ h1, h2, h3, h4 { font-family: var(--nx-font-display); font-weight: 600; line-height: var(--nx-leading-tight); letter-spacing: var(--nx-tracking-display); text-wrap: balance; } /* Les langues germaniques composent des mots que le français n'a pas : « Produktionslinie », « Liwwerzaiten », « sleutel-op-de-deurwoning ». Mesuré : à 375 px, le H1 allemand réclamait 377 px dans une boîte de 320 et faisait déborder toute la page horizontalement — invisible en français. hyphens:auto coupe selon les règles de la langue déclarée sur ; c'est pour ça qu'on le réserve à ces trois langues, plutôt que de l'imposer au français où il hacherait des titres qui tiennent très bien. */ :is([lang="de"], [lang="nl"], [lang="lb"]) :is(h1, h2, h3, h4) { hyphens: auto; } /* Filet de sécurité, toutes langues : un mot qui ne rentre PAS doit casser plutôt que percer la mise en page. Ne s'applique qu'en dernier recours. */ h1, h2, h3, h4 { overflow-wrap: break-word; } h1 { font-size: var(--nx-text-4xl); } h2 { font-size: var(--nx-text-3xl); } h3 { font-size: var(--nx-text-xl); letter-spacing: var(--nx-tracking-tight); } h4 { font-size: var(--nx-text-md); letter-spacing: 0; line-height: var(--nx-leading-snug); } p { text-wrap: pretty; } p, li { max-width: var(--nx-measure); } a { color: var(--nx-green); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--nx-green-dark); } /* Focus visible — navigation clavier complète (exigence non négociable). */ :focus-visible { outline: 2px solid var(--nx-green); outline-offset: 3px; border-radius: var(--nx-radius-sm); } /* --- Utilitaires ------------------------------------------------------ */ .nx-container { width: 100%; max-width: var(--nx-container); margin-inline: auto; padding-inline: var(--nx-gutter); } .nx-container--wide { max-width: var(--nx-container-wide); } .nx-section { padding-block: var(--nx-section); } .nx-section--cream { background: var(--nx-cream); } .nx-section--ink { background: var(--nx-ink); color: var(--nx-white); } .nx-section--ink h2, .nx-section--ink h3 { color: var(--nx-white); } .nx-skip { position: absolute; left: var(--nx-4); top: -100%; background: var(--nx-ink); color: var(--nx-white); padding: var(--nx-3) var(--nx-6); z-index: 100; transition: top var(--nx-dur) var(--nx-ease); } .nx-skip:focus { top: var(--nx-4); color: var(--nx-white); } .nx-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Marques sœurs dans la barre de menu ------------------------------ Deux logos, séparés du menu par un filet : ce ne sont pas des pages du site, ce sont d'autres sites. La séparation visuelle prépare le lecteur au changement d'onglet. ---------------------------------------------------------------------- */ .nx-nav__brands { display: flex; align-items: center; gap: var(--nx-4); padding-left: var(--nx-6); border-left: 1px solid var(--nx-line); } .nx-brandlink { display: block; line-height: 0; opacity: 0.55; } .nx-brandlink img { height: 26px; width: auto; } .nx-brandlink:hover, .nx-brandlink:focus-visible { opacity: 1; } /* Marque pas encore en ligne : logo présent, non cliquable (mise en ligne progressive). Le logo reste, l'architecture reste — rien à défaire. */ .nx-brandlink--soon { cursor: default; } .nx-brandlink { transition: opacity var(--nx-dur) var(--nx-ease); } /* --- Sélecteur de langue, en-tête ------------------------------------- Menu déroulant natif (
/). Fermé : le code courant seul, pour ne pas peser autant que le menu principal. Ouvert : les noms écrits en toutes lettres, dans leur propre langue. ---------------------------------------------------------------------- */ .nx-langs-dd { position: relative; } .nx-langs-dd > summary { display: flex; align-items: center; gap: var(--nx-2); padding: var(--nx-2) var(--nx-3); font-size: var(--nx-text-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--nx-ink-soft); cursor: pointer; border: 1px solid var(--nx-line); border-radius: var(--nx-radius-sm); list-style: none; /* le triangle par défaut ferait doublon */ transition: color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease); } .nx-langs-dd > summary::-webkit-details-marker { display: none; } .nx-langs-dd > summary:hover { color: var(--nx-base); border-color: var(--nx-base); } .nx-langs-dd > summary:focus-visible { outline: 2px solid var(--nx-base); outline-offset: 2px; } .nx-langs-dd__v { width: 10px; height: 6px; transition: transform var(--nx-dur) var(--nx-ease); } .nx-langs-dd[open] > summary { color: var(--nx-base); border-color: var(--nx-base); } .nx-langs-dd[open] .nx-langs-dd__v { transform: rotate(180deg); } .nx-langs-dd__panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 190px; list-style: none; margin: 0; padding: var(--nx-2); background: var(--nx-white); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-sm); box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.25); } .nx-langs-dd__panel a { display: flex; align-items: baseline; gap: var(--nx-3); padding: var(--nx-2) var(--nx-3); color: var(--nx-ink); text-decoration: none; border-radius: var(--nx-radius-sm); white-space: nowrap; } .nx-langs-dd__panel a:hover { background: var(--nx-neutre); color: var(--nx-base); } .nx-langs-dd__panel a[aria-current="true"] { background: var(--nx-neutre); font-weight: 700; } .nx-langs-dd__code { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--nx-ink-soft); min-width: 2ch; } /* Sur mobile le menu est déjà un panneau : un déroulant DANS un déroulant se ferait couper par le bord. Les langues s'y déplient à plat. */ /* Le sélecteur reste un DÉROULANT à toutes les tailles. Il s'aplatissait en liste sous le seuil, pour s'intégrer au panneau du menu où il vivait alors. Il en est sorti : il est désormais à côté du burger sur mobile, donc toujours visible — et un déroulant y est justement ce qu'il faut, car une liste à plat de cinq langues mangerait la barre. Sur un petit écran, le panneau s'ouvre au-dessus du contenu ; il est ancré à droite (right: 0) et ne peut donc pas déborder. */ @media (max-width: 480px) { /* Cible tactile : 44 px minimum, comme le burger juste à côté. */ .nx-langs-dd > summary { padding: var(--nx-3); min-height: 44px; } .nx-langs-dd__panel a { padding: var(--nx-3) var(--nx-4); min-height: 44px; align-items: center; } } /* --- Adresses cliquables ---------------------------------------------- Sur mobile elles ouvrent l'app de cartes (voir _shared/js/ui.js) : la cible doit donc faire au moins 44 px de haut, comme tout ce qu'on touche au doigt. ---------------------------------------------------------------------- */ .nx-addr { display: inline-block; color: inherit; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.35); text-underline-offset: 3px; transition: text-decoration-color var(--nx-dur) var(--nx-ease); } .nx-addr:hover, .nx-addr:focus-visible { text-decoration-color: currentColor; } @media (max-width: 700px) { .nx-addr { padding: var(--nx-2) 0; } } /* --- Pile de marques, en pied ---------------------------------------- Les trois logos l'un au-dessus de l'autre : c'est le seul endroit du site où la famille se voit d'un coup. La marque courante est en pleine opacité et pointe vers son propre accueil ; les deux autres ouvrent un onglet. ---------------------------------------------------------------------- */ .nx-pile { list-style: none; padding: 0; margin: 0 0 var(--nx-6); display: grid; gap: var(--nx-4); } .nx-pile__item a { display: block; line-height: 0; padding: var(--nx-2) 0; opacity: 0.5; transition: opacity var(--nx-dur) var(--nx-ease); } .nx-pile__item a:hover, .nx-pile__item a:focus-visible { opacity: 1; } .nx-pile__item img { height: 34px; width: auto; } .nx-pile__item--self a { opacity: 1; cursor: default; } /* Marque pas encore en ligne : logo conservé, sans lien. */ .nx-pile__item--soon { display: block; line-height: 0; padding: var(--nx-2) 0; opacity: 0.5; } .nx-footer__liens { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nx-2); padding-top: var(--nx-4); border-top: 1px solid rgba(255, 255, 255, 0.12); } /* Écosystème du groupe en logos cliquables (IoT Factory, RealPulse, Next Day) — demande 28/07/2026. Logos blancs sur fond sombre, légèrement estompés. */ .nx-footer__eco { list-style: none; padding: var(--nx-4) 0 0; margin: var(--nx-4) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; gap: var(--nx-5); justify-items: start; } .nx-footer__eco a { display: inline-block; } .nx-footer__eco img { height: 24px; width: auto; display: block; opacity: 0.82; transition: opacity var(--nx-dur) var(--nx-ease); } .nx-footer__eco a:hover img, .nx-footer__eco a:focus-visible img { opacity: 1; } .nx-footer__eco-text { font-size: var(--nx-text-sm); } /* Même seuil par marque que le menu — voir le bloc « Repli du menu » plus bas. */ @media (max-width: 1439px) { [data-brand="build"] .nx-nav__brands { padding-left: 0; padding-top: var(--nx-6); border-left: 0; border-top: 1px solid var(--nx-mist); justify-content: flex-start; } [data-brand="build"] .nx-brandlink { opacity: 1; } [data-brand="build"] .nx-brandlink img { height: 30px; } } @media (max-width: 1139px) { [data-brand="windows"] .nx-nav__brands { padding-left: 0; padding-top: var(--nx-6); border-left: 0; border-top: 1px solid var(--nx-mist); justify-content: flex-start; } [data-brand="windows"] .nx-brandlink { opacity: 1; } [data-brand="windows"] .nx-brandlink img { height: 30px; } } /* --- Bandeau de relecture -------------------------------------------- Volontairement voyant, et en haut de page : une traduction machine ne doit pas pouvoir partir en production sans que quelqu'un s'en aperçoive. Se retire langue par langue via i18n.A_RELIRE. ---------------------------------------------------------------------- */ .nx-relecture { margin: 0; padding: var(--nx-3) var(--nx-gutter); background: repeating-linear-gradient(45deg, #F3D9A4, #F3D9A4 10px, #EFCE8A 10px, #EFCE8A 20px); color: #4A3707; font-size: var(--nx-text-xs); font-weight: 600; text-align: center; max-width: none; } /* --- Sélecteur de langue ---------------------------------------------- */ .nx-langs { margin-top: var(--nx-8); } .nx-langs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--nx-2); } .nx-langs a { display: block; padding: var(--nx-2) var(--nx-4); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 100px; font-size: var(--nx-text-xs); color: var(--nx-mist); text-decoration: none; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-langs a:hover { border-color: var(--nx-accent); color: var(--nx-white); } .nx-langs a[aria-current="true"] { background: var(--nx-accent); color: var(--nx-on-accent); border-color: var(--nx-accent); font-weight: 600; } /* Piège à robots. display:none plutôt que le décalage hors écran habituel : on VEUT qu'il soit invisible aux lecteurs d'écran aussi — un utilisateur aveugle ne doit pas tomber sur un champ « ne pas remplir ». Les robots, eux, lisent le HTML et ignorent le CSS. */ .hp { display: none; } /* Confirmation d'envoi, révélée au retour de /api/contact.php?ok=1 */ .form__ok { background: #E8F3EC; border-left: 3px solid var(--nx-base); padding: var(--nx-4) var(--nx-6); margin-bottom: var(--nx-8); font-size: var(--nx-text-sm); font-weight: 600; color: var(--nx-ink); max-width: none; } /* Label capitales — le seul usage de l'uppercase, et il est cadré. */ .nx-label { font-family: var(--nx-font-body); font-size: var(--nx-text-xs); font-weight: 600; letter-spacing: var(--nx-tracking-label); text-transform: uppercase; /* Revue bêta, diapo 9 : le vert faisait double emploi (intitulés ET boutons) et, sur fond clair, peinait en lisibilité. Les intitulés passent en ink-soft (7,0:1) — nettement lisibles, et le vert est rendu aux ACTIONS. Sur fond sombre, l'accent vif garde sa place (6,18:1). */ color: var(--nx-ink-soft); margin-bottom: var(--nx-4); max-width: none; } .nx-section--ink .nx-label { color: var(--nx-green-bright); } /* 6.18:1 → AA */ .nx-lede { font-size: var(--nx-text-md); color: var(--nx-ink-soft); max-width: 60ch; } .nx-section--ink .nx-lede { color: var(--nx-mist); } /* --- Boutons ---------------------------------------------------------- */ .nx-btn { display: inline-flex; align-items: center; gap: var(--nx-2); font-family: var(--nx-font-body); font-size: var(--nx-text-sm); font-weight: 600; padding: var(--nx-3) var(--nx-6); border: 1px solid transparent; border-radius: var(--nx-radius); text-decoration: none; cursor: pointer; white-space: nowrap; /* un bouton qui passe à la ligne n'est plus un bouton */ transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } /* CTA primaire = accent de marque, conformément à la charte (« Signal Green is reserved for accents & calls-to-action »). Le texte y est en --nx-ink et pas en blanc : blanc sur accent tombe à 2.44:1 sur les trois marques, ink y est à 7.14:1. Voir la « règle d'accent » dans tokens.css. */ .nx-btn--primary { background: var(--nx-accent); color: var(--nx-on-accent); } .nx-btn--primary:hover { background: var(--nx-base); color: var(--nx-white); } /* Variante sobre pour les zones où l'accent serait envahissant (nav). */ .nx-btn--base { background: var(--nx-base); color: var(--nx-white); } .nx-btn--base:hover { background: var(--nx-base-dark); color: var(--nx-white); } .nx-btn--ghost { background: transparent; color: var(--nx-ink); border-color: var(--nx-line); } .nx-btn--ghost:hover { border-color: var(--nx-green); color: var(--nx-green); } .nx-btn--onDark { background: transparent; color: var(--nx-white); border-color: rgba(255, 255, 255, 0.45); } .nx-btn--onDark:hover { background: var(--nx-white); color: var(--nx-ink); border-color: var(--nx-white); } /* --- Header ----------------------------------------------------------- */ .nx-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--nx-line); } /* L'en-tête a SA largeur, plus large que la colonne de texte (1140). C'est du chrome — logos, menu, bouton —, pas de la prose : rien ne l'oblige à tenir dans la mesure de lecture. Sans ça, la barre de nexusbuild réclamait 1336 px dans un conteneur plafonné à 1140, et flex écrasait les logos de marque jusqu'à 0 px de large. Ils avaient purement disparu. */ .nx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-8); min-height: 72px; max-width: var(--nx-container-wide); } /* RÈGLE INTANGIBLE — un logo ne rétrécit pas. Ces éléments sont des items flex : par défaut ils cèdent quand la barre est trop courte. Un logo qui cède ne devient pas plus petit, il se DÉFORME — la hauteur est fixée, seule la largeur est rognée. C'est une atteinte à la marque, pas un compromis de mise en page. Quand la place manque, c'est le menu qui passe en burger (voir le point de rupture plus bas), jamais un logo qui maigrit. */ .nx-logo, .nx-logo img, .nx-nav__brands, .nx-brandlink, .nx-brandlink img, .nx-langs-dd, .nx-nav__cta { flex-shrink: 0; } /* Logo officiel (charte §02). Zone de protection = hauteur de capitale de « NEXUS » sur les quatre côtés — d'où le padding. Taille mini digitale imposée : 120px de large pour le wordmark. */ /* Taille minimale imposée par la charte : 120px de large en digital, sous lesquels le wordmark perd sa lisibilité. Le ratio du fichier est 2000×616, donc 120px de large = 37px de haut. On prend 44px (≈143px de large) pour garder une marge. */ .nx-logo { display: block; padding: var(--nx-2); line-height: 0; flex: none; } .nx-logo img { width: auto; height: 44px; min-width: 120px; object-fit: contain; } .nx-logo--footer img { height: 40px; } @media (max-width: 640px) { .nx-logo img { height: 38px; } } /* gap rendu à --nx-8 : je l'avais rogné à 6 pour faire tenir le sélecteur de langue. C'était prendre la place sur le rythme de la barre — et, en réalité, sur les logos, qui encaissaient le reste. On ne gagne pas de la place en serrant : quand ça ne rentre pas, ça passe en burger. */ .nx-nav { display: flex; align-items: center; gap: var(--nx-8); } .nx-nav__links { display: flex; align-items: center; gap: var(--nx-6); } .nx-nav__links a { font-size: var(--nx-text-sm); font-weight: 500; color: var(--nx-ink); text-decoration: none; padding-block: var(--nx-2); white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease); } .nx-nav__links a:hover { color: var(--nx-green); } .nx-nav__links a[aria-current="page"] { color: var(--nx-green); border-bottom-color: var(--nx-green); } /* --- Burger ---------------------------------------------------------- Bouton réel : focusable, annoncé, avec aria-expanded. Pas une div. */ .nx-burger { display: none; width: 44px; height: 44px; /* cible tactile minimale */ align-items: center; justify-content: center; background: none; border: 1px solid var(--nx-line); border-radius: var(--nx-radius); cursor: pointer; padding: 0; } .nx-burger__bars, .nx-burger__bars::before, .nx-burger__bars::after { display: block; width: 18px; height: 2px; background: var(--nx-ink); transition: transform var(--nx-dur) var(--nx-ease), opacity var(--nx-dur) var(--nx-ease); } .nx-burger__bars { position: relative; } .nx-burger__bars::before, .nx-burger__bars::after { content: ""; position: absolute; left: 0; } .nx-burger__bars::before { top: -6px; } .nx-burger__bars::after { top: 6px; } .nx-burger[aria-expanded="true"] .nx-burger__bars { background: transparent; } .nx-burger[aria-expanded="true"] .nx-burger__bars::before { transform: translateY(6px) rotate(45deg); } .nx-burger[aria-expanded="true"] .nx-burger__bars::after { transform: translateY(-6px) rotate(-45deg); } /* Seuil relevé de 940 à 1024 : Montserrat est nettement plus large que la police de repli, et la nav porte 7 entrées. */ /* --- Repli du menu — UN SEUIL PAR SITE --------------------------------- Les trois barres n'ont pas la même longueur. Mesuré, gouttières comprises : Windows tient en 1120 px, Build en réclame 1336, Homes 1410. Un seuil unique calé sur le plus long (1439) repliait aussi celui de Windows : sur un portable en 1366, « Marques », « Délais » et « Le PVC » disparaissaient derrière le burger alors qu'ils tenaient très largement. Windows était puni pour la longueur des deux autres. Les media queries ne lisent pas les variables CSS : impossible de paramétrer le seuil. On duplique donc les blocs en les scopant par marque. La duplication est assumée — c'est le prix d'un seuil juste par site. Quand les barres de Build et Homes auront été raccourcies, les deux blocs pourront redevenir un seul. ---------------------------------------------------------------------- */ @media (max-width: 1439px) { [data-brand="build"] .nx-burger { display: flex; } [data-brand="build"] .nx-nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--nx-white); border-bottom: 1px solid var(--nx-line); padding: var(--nx-4) var(--nx-gutter) var(--nx-8); box-shadow: var(--nx-shadow-2); max-height: calc(100dvh - 72px); overflow-y: auto; } /* [hidden] plutôt qu'un display:none en CSS : l'état reste lisible par les lecteurs d'écran et le contenu sort de l'ordre de tabulation. */ [data-brand="build"] .nx-nav[hidden] { display: none; } [data-brand="build"] .nx-nav__links { flex-direction: column; align-items: stretch; gap: 0; } [data-brand="build"] .nx-nav__links a { padding: var(--nx-4) 0; border-bottom: 1px solid var(--nx-mist); font-size: var(--nx-text-md); } [data-brand="build"] .nx-nav__links a[aria-current="page"] { border-bottom-color: var(--nx-mist); } [data-brand="build"] .nx-nav__cta { margin-top: var(--nx-6); justify-content: center; } } /* Homes réclame ~1480 px — plus que le conteneur large lui-même (1440). Mesuré : à 1440, le bouton « Recevoir le catalogue » s'étendait jusqu'à 1457 et était COUPÉ par le bord de la fenêtre. Ses libellés sont longs (« Prix & financement », « Recevoir le catalogue ») et son sélecteur de langue s'y est ajouté. Conséquence assumée : Homes montre le burger sur presque tous les écrans. Raccourcir sa navigation est la vraie réponse — c'est une décision d'arborescence, pas de CSS. */ @media (max-width: 1479px) { [data-brand="homes"] .nx-burger { display: flex; } [data-brand="homes"] .nx-nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--nx-white); border-bottom: 1px solid var(--nx-line); padding: var(--nx-4) var(--nx-gutter) var(--nx-8); box-shadow: var(--nx-shadow-2); max-height: calc(100dvh - 72px); overflow-y: auto; } [data-brand="homes"] .nx-nav[hidden] { display: none; } [data-brand="homes"] .nx-nav__links { flex-direction: column; align-items: stretch; gap: 0; } [data-brand="homes"] .nx-nav__links a { padding: var(--nx-4) 0; border-bottom: 1px solid var(--nx-mist); font-size: var(--nx-text-md); } [data-brand="homes"] .nx-nav__links a[aria-current="page"] { border-bottom-color: var(--nx-mist); } [data-brand="homes"] .nx-nav__cta { margin-top: var(--nx-6); justify-content: center; } [data-brand="homes"] .nx-nav__brands { padding-left: 0; padding-top: var(--nx-6); border-left: 0; border-top: 1px solid var(--nx-mist); justify-content: flex-start; } [data-brand="homes"] .nx-brandlink { opacity: 1; } [data-brand="homes"] .nx-brandlink img { height: 30px; } /* (le sélecteur de langue n'est plus dans le nav : il reste un déroulant à toutes les tailles — voir le bloc « Sélecteur de langue » plus haut) */ } @media (max-width: 1139px) { [data-brand="windows"] .nx-burger { display: flex; } [data-brand="windows"] .nx-nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--nx-white); border-bottom: 1px solid var(--nx-line); padding: var(--nx-4) var(--nx-gutter) var(--nx-8); box-shadow: var(--nx-shadow-2); max-height: calc(100dvh - 72px); overflow-y: auto; } [data-brand="windows"] .nx-nav[hidden] { display: none; } [data-brand="windows"] .nx-nav__links { flex-direction: column; align-items: stretch; gap: 0; } [data-brand="windows"] .nx-nav__links a { padding: var(--nx-4) 0; border-bottom: 1px solid var(--nx-mist); font-size: var(--nx-text-md); } [data-brand="windows"] .nx-nav__links a[aria-current="page"] { border-bottom-color: var(--nx-mist); } [data-brand="windows"] .nx-nav__cta { margin-top: var(--nx-6); justify-content: center; } } /* --- Footer ----------------------------------------------------------- */ .nx-footer { background: var(--nx-ink); color: var(--nx-mist); padding-block: var(--nx-16) var(--nx-8); font-size: var(--nx-text-sm); } .nx-footer a { color: var(--nx-mist); text-decoration: none; } .nx-footer a:hover { color: var(--nx-green-bright); text-decoration: underline; } .nx-footer h3 { font-size: var(--nx-text-xs); font-weight: 600; letter-spacing: var(--nx-tracking-label); text-transform: uppercase; color: var(--nx-white); margin-bottom: var(--nx-4); } .nx-footer__grid { display: grid; gap: var(--nx-12); grid-template-columns: 1.4fr repeat(3, 1fr); } .nx-footer__grid ul { list-style: none; padding: 0; display: grid; gap: var(--nx-2); } .nx-footer__addr, .footer__addr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-6); margin-top: var(--nx-6); } .footer__addr p { font-size: var(--nx-text-xs); color: #9AA5A1; line-height: 1.5; } .footer__mail { grid-column: 1 / -1; margin-top: var(--nx-2); } .footer__contacts { grid-column: 1 / -1; margin-top: var(--nx-2); font-size: var(--nx-text-xs); } .footer__contacts li { line-height: 1.5; } .footer__contact-role { display: block; color: var(--nx-white); font-size: 0.68rem; letter-spacing: var(--nx-tracking-label); text-transform: uppercase; } .footer__addr strong { display: block; color: var(--nx-white); margin-bottom: var(--nx-1); font-size: 0.68rem; letter-spacing: var(--nx-tracking-label); text-transform: uppercase; } /* Choix d'outil GPS au clic sur l'ADRESSE elle-même (demande 28/07/2026). L'adresse est le ; les liens héritent de .nx-footer a. */ .nx-itin__addr { display: flex; align-items: flex-start; gap: var(--nx-2); cursor: pointer; list-style: none; color: #9AA5A1; font-size: var(--nx-text-xs); line-height: 1.5; } .nx-itin__addr::-webkit-details-marker { display: none; } .nx-itin__addr strong { display: block; color: var(--nx-white); margin-bottom: var(--nx-1); font-size: 0.68rem; letter-spacing: var(--nx-tracking-label); text-transform: uppercase; text-decoration: none; } /* Soulignement discret sur les lignes d'adresse = « c'est cliquable ». */ .nx-itin__lines { text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.28); text-underline-offset: 2px; } .nx-itin__addr:hover .nx-itin__lines, .nx-itin[open] .nx-itin__lines { color: var(--nx-mist); text-decoration-color: currentColor; } .nx-itin__addr:focus-visible { outline: 2px solid var(--nx-green-bright); outline-offset: 2px; } .nx-itin__v { flex-shrink: 0; margin-top: 3px; width: 9px; height: 6px; color: var(--nx-mist); transition: transform var(--nx-dur) var(--nx-ease); } .nx-itin[open] .nx-itin__v { transform: rotate(180deg); } .nx-itin__panel { display: grid; gap: 3px; margin-top: var(--nx-3); } .nx-itin__panel a { font-size: var(--nx-text-sm); text-decoration: none; padding: 2px 0; } .nx-itin__panel a:hover { text-decoration: underline; } /* Cibles tactiles confortables sur mobile (~44px). */ @media (max-width: 700px) { .nx-itin__addr { padding: var(--nx-2) 0; } .nx-itin__panel a { padding: var(--nx-3) 0; } } .nx-footer__group { margin-top: var(--nx-16); padding: var(--nx-6); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--nx-radius); background: rgba(255, 255, 255, 0.03); } .nx-footer__group p { font-size: var(--nx-text-sm); color: var(--nx-mist); max-width: none; } .nx-footer__group a { color: var(--nx-green-bright); } /* --- Souveraineté de l'hébergement ----------------------------------- Le drapeau est une illustration géographique posée à côté d'un fait, pas un label de certification : il n'est ni encadré, ni tamponné, ni associé à une mention d'agrément. Les règles d'usage de l'emblème (2012/C 271/04) interdisent tout usage laissant croire à un soutien ou un agrément d'une institution européenne — d'où le traitement discret et la formulation strictement factuelle. ---------------------------------------------------------------------- */ .nx-footer__eu { margin-top: var(--nx-6); padding: var(--nx-6); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--nx-radius); display: grid; grid-template-columns: auto 1fr; gap: var(--nx-6); align-items: start; } .nx-footer__eu-flag { width: 60px; height: 40px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); } .nx-footer__eu h3 { font-size: var(--nx-text-sm); text-transform: none; letter-spacing: 0; color: var(--nx-white); margin-bottom: var(--nx-2); } .nx-footer__eu p { font-size: var(--nx-text-xs); color: #9AA5A1; max-width: 80ch; } .nx-footer__eu strong { color: var(--nx-mist); } .nx-footer__eu-tech { margin-top: var(--nx-3); padding-top: var(--nx-3); border-top: 1px solid rgba(255, 255, 255, 0.1); font-style: italic; } @media (max-width: 560px) { .nx-footer__eu { grid-template-columns: 1fr; gap: var(--nx-4); } } .nx-footer__bottom { margin-top: var(--nx-8); padding-top: var(--nx-6); border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; justify-content: space-between; gap: var(--nx-6); flex-wrap: wrap; font-size: var(--nx-text-xs); color: #9AA5A1; } /* Marqueur discret mais présent : ce numéro vient de meccabuild.be et doit être confirmé pour l'entité Nexus. */ .todo-inline { color: #E0C179; font-weight: 600; } @media (max-width: 860px) { .nx-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .nx-footer__grid { grid-template-columns: 1fr; } }