/* NjakaDev — Layout Header/nav (y compris le menu mobile, piloté par le snippet Fluent Snippets "NJ — Menu mobile") et les grilles structurelles encore utilisées telles quelles (Accueil, listing Ressources) — une grille = un layout, indépendamment de ce qu'elle contient : les styles des items eux-mêmes vivent dans nj-components.css ou nj-pages.css. Le footer et les grilles des autres pages ont été reconstruits en Global Classes Elementor natives ; leur CSS ici est devenu mort et a été retiré (le HTML ne porte plus ces classes nj-*). */ /* ===================== HEADER / NAV ===================== */ /* `position: sticky` vit sur le wrapper d'emplacement Elementor Theme Builder (.elementor-location-header, enfant direct de ), PAS sur .nj-site-header lui-même — un élément sticky ne peut "coller" que sur la hauteur de SON PROPRE parent direct (limite du spec CSS, cf. MDN : la plage de collage est bornée par la boîte du "containing block", ici le parent). Le wrapper d'emplacement, injecté par Elementor sans enfant frère, se réduit exactement à la hauteur de .nj-site-header s'il porte lui-même le sticky (0 pixel de marge de manœuvre = aucun effet visible, bug réel rencontré et diagnostiqué en mesurant le rect en direct plutôt qu'en se fiant au CSS). En le posant un cran plus haut, son parent redevient — la hauteur de toute la page, largement suffisante. */ .elementor-location-header { position: sticky; top: 0; z-index: 40; } .nj-site-header { background-color: rgba(8, 9, 10, 0); border-bottom: 1px solid rgba(255, 255, 255, 0); transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease; } /* État "collé" — classe posée par le snippet Fluent Snippets JS (NJ — Header sticky + glassmorphism) une fois la page scrollée au-delà du seuil. Même recette "verre" que .hero-stat (fond translucide du token --bg + backdrop-filter blur) mais renforcée pour rester lisible plein écran, façon barre de navigation Apple : fond qui se révèle au scroll plutôt que présent en permanence. */ .nj-site-header.is-scrolled { background-color: rgba(8, 9, 10, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--line-10); box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.55); } .nj-navbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--max); margin: 0 auto; padding: 26px var(--gutter); } /* Note structurelle (s'applique à .nj-logo, .nj-nav-links, .nj-nav-lang et .nj-nav-desktop ci-dessous) : ce sont des e-flexbox v4 atomiques imbriqués dans une rangée flex (.nj-navbar). Elementor donne à tout conteneur atomique (classe .e-con) un width:100% de son parent par défaut (héritage de compat v3) — au lieu du "auto au contenu" qu'on veut ici pour des éléments comme le logo ou une liste de liens. `flex: none` seul ne suffit pas à contrer un width:100% déjà explicite (le flex-basis "auto" d'un item flex reprend son width défini). `width: max-content` neutralise ce défaut sans toucher aux styles Elementor : correctif structurel du Design System, pas une duplication de mise en forme. */ .nj-logo { display: flex; align-items: baseline; gap: 2px; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; flex: none; width: max-content; } .nj-logo span { color: var(--fg-dim-42); font-weight: 300; } .nj-nav-links { display: flex; align-items: center; gap: 30px; font-size: 13.5px; font-weight: 400; color: var(--fg-dim-55); flex: none; width: max-content; } .nj-nav-links a, .nj-nav-links .e-paragraph-base { color: var(--fg-dim-55); transition: color 0.18s ease; flex: none; } .nj-nav-links a[aria-current="page"], .nj-nav-links .e-paragraph-base[aria-current="page"] { color: var(--fg); } .nj-nav-links a:hover, .nj-nav-links a:focus-visible, .nj-nav-links .e-paragraph-base:hover, .nj-nav-links .e-paragraph-base:focus-visible { color: #fff; } .nj-nav-lang { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.06em; color: var(--fg-dim-42); flex: none; width: max-content; } .nj-nav-lang strong, .nj-nav-lang .e-paragraph-base:first-child { color: var(--fg); font-weight: 400; } .nj-nav-lang .nj-sep { opacity: 0.4; } .nj-nav-desktop { display: flex; align-items: center; gap: 30px; flex: none; width: max-content; } /* ===================== NAV MOBILE (hamburger + panneau plein écran) ===================== Comportement (ouverture/fermeture, morph hamburger->X, verrouillage du scroll) géré par le snippet Fluent Snippets JS "NJ — Menu mobile (hamburger + panneau)". Ce script déplace .nj-nav-mobile-panel et .nj-nav-mobile-backdrop dans au chargement — un ancêtre avec backdrop-filter (le header en état "collé", cf. .nj-site-header.is-scrolled plus haut) crée un nouveau bloc englobant pour tout position:fixed descendant, ce qui confinerait sinon le panneau à la hauteur du header au lieu de couvrir l'écran. Le sélecteur CSS reste valable après ce déplacement (les classes ne dépendent pas de la position dans le DOM). */ .nj-nav-mobile { display: none; } /* Sélecteur `button.nj-nav-mobile-toggle` (0,1,1), pas juste `.nj-nav-mobile-toggle` (0,1,0) : le thème parent pose `[type="button"],[type="submit"],button{...}` (fond/couleur magenta par défaut) à spécificité égale (0,1,0) sur la branche `button` — une simple classe ne le bat pas de façon garantie selon l'ordre de chargement (même gotcha déjà rencontré sur .nj-chip/.nj-page-btn). */ button.nj-nav-mobile-toggle { cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-16); border-radius: 2px; background: transparent; flex: none; position: relative; z-index: 61; } /* Même gotcha, variante :hover/:focus du thème parent (spécificité 0,1,1 identique à `button.nj-nav-mobile-toggle` seul — un simple clic déclenche focus+hover et remet le fond magenta sans ce correctif). */ button.nj-nav-mobile-toggle:hover, button.nj-nav-mobile-toggle:focus, button.nj-nav-mobile-toggle:active { background: transparent; } .nj-nav-mobile-toggle-bar { display: block; width: 18px; height: 1px; background: var(--fg); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, background-color 0.35s ease; } /* Morph hamburger -> X, piloté par .is-open (posé par le JS au clic) */ .nj-nav-mobile-toggle.is-open .nj-nav-mobile-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nj-nav-mobile-toggle.is-open .nj-nav-mobile-toggle-bar:nth-child(2) { opacity: 0; } .nj-nav-mobile-toggle.is-open .nj-nav-mobile-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Le bouton reste dans la barre d'en-tête (sombre) même panneau ouvert — le panneau clair démarre SOUS l'en-tête, ne le recouvre jamais — donc les barres (devenues le X) restent claires (var(--fg)) dans les deux états, pas de bascule de couleur nécessaire ici. */ .nj-nav-mobile-backdrop { position: fixed; top: var(--nj-header-h, 78px); left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(8, 9, 10, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .nj-nav-mobile-backdrop.is-open { opacity: 1; pointer-events: auto; } /* Panneau "glassmorphisme clair" — fond blanc translucide + flou, à l'opposé de la palette sombre du reste du site (demande explicite), glissant de gauche à droite à l'ouverture (translateX -100% -> 0). */ .nj-nav-mobile-panel { position: fixed; top: var(--nj-header-h, 78px); left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; padding: 8px var(--gutter) 32px; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-top: 1px solid rgba(10, 11, 12, 0.08); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.35); transform: translateX(-100%); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; } .nj-nav-mobile-panel.is-open { transform: translateX(0); } /* Liste des liens — chaque option de navigation mise en évidence par un séparateur (bordure basse), comme demandé. */ .nj-nav-mobile-links { list-style: none; margin: 0; padding: 0; } .nj-nav-mobile-links li { border-bottom: 1px solid rgba(10, 11, 12, 0.1); } .nj-nav-mobile-links a { display: block; padding: 18px 4px; font-size: 15px; font-weight: 400; letter-spacing: -0.01em; color: rgba(10, 11, 12, 0.82); transition: color 0.18s ease, padding-left 0.18s ease; } .nj-nav-mobile-links a[aria-current="page"] { color: var(--on-light); font-weight: 500; } .nj-nav-mobile-links a:hover, .nj-nav-mobile-links a:focus-visible, .nj-nav-mobile-links a:active { color: var(--on-light); padding-left: 10px; } .nj-nav-mobile-lang { display: flex; align-items: center; gap: 6px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(10, 11, 12, 0.1); font-size: 12px; letter-spacing: 0.06em; color: rgba(10, 11, 12, 0.5); } .nj-nav-mobile-lang strong { color: var(--on-light); font-weight: 500; } .nj-nav-mobile-lang .nj-sep { opacity: 0.5; } .nj-nav-mobile-cta { margin-top: 22px; display: flex; align-items: center; justify-content: center; padding: 15px 22px; background: var(--on-light); color: #fff; font-size: 14px; font-weight: 500; border-radius: 2px; text-align: center; transition: background-color 0.18s ease; } .nj-nav-mobile-cta:hover, .nj-nav-mobile-cta:focus-visible { background: #26282b; color: #fff; } /* Verrouillage du scroll de la page pendant que le panneau est ouvert (classe posée par le JS sur , jamais sur — cf. la note sticky plus haut sur pourquoi overflow ne doit jamais être posé sur seul sur ce site). */ html.nj-nav-mobile-locked { overflow: hidden; } .nj-bottom-li{ border-bottom:0px!important; } /* ===================== GRILLES — Accueil ===================== */ .nj-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-08); border-left: 1px solid var(--line-08); } /* ===================== GRILLES — Ressources ===================== */ .nj-articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }