/* ═══════════════════════════════════════════════════════════════════ HOME — refonte de l'accueil (2026-09-04) Chargé APRÈS style.css, uniquement par index.html. ⚠️ Toutes les classes sont préfixées `nh-` : style.css est partagé par les 57 pages du site et possède déjà .hero, .wrap, .btn, .panel, .row, .main, .side, .tag… Sans préfixe, les deux feuilles se disputeraient les mêmes éléments. Seule exception volontaire : `.reveal`, laissée telle quelle parce que c'est app.js qui l'anime (une réimplémentation locale ferait doublon). Contrainte propriétaire : AUCUN texte gris ou pâle. Les tokens --ink-soft (#1A1A1A) et --ink-faint (#1A1A1A) de style.css ne sont donc pas réutilisés ici ; le texte secondaire descend à #1A1A1A. ═══════════════════════════════════════════════════════════════════ */ /* Les tokens sont posés AUSSI sur .nh-home (le ) : la barre de navigation et ses mega-menus vivent hors des sections `.nh`, et sans cela leurs `var(--nh-*)` seraient indéfinis (icônes et bordures retombaient sur des couleurs héritées de style.css). */ .nh, .nh-home { /* Encre — tout est foncé, pas de gris pâle */ --nh-ink: var(--ng-text); --nh-ink-2: var(--ng-text); /* Calque LEMO (2026-09-22) : bleu #005DAA par défaut, plus vert Neegui — (variante de comparaison supprimée le 2026-09-27). */ --nh-green: var(--ng-primary); --nh-green-deep: var(--ng-navy); --nh-green-dark: var(--ng-text); --nh-green-pale: var(--ng-primary-soft); --nh-tint: var(--ng-bg); /* Modules — un seul bleu, comme sur lemo.com, plutôt que 5 teintes */ --nh-commerce: var(--ng-primary); --nh-pharma: var(--ng-primary); --nh-resto: var(--ng-primary); --nh-finance: var(--ng-primary); --nh-equipe: var(--ng-primary); /* Surfaces */ --nh-paper: #ffffff; --nh-bg: var(--ng-bg); --nh-sunken: var(--ng-bg); --nh-line: var(--ng-border); --nh-line-2: var(--ng-border); --nh-radius: 20px; /* charte 2026-09-26 (identique à l'appli) — était 0 (calque LEMO) */ --nh-shadow-sm: 0 10px 24px -14px rgba(var(--ng-navy-rgb), .16); --nh-shadow-md: 0 16px 34px -18px rgba(var(--ng-navy-rgb), .20); --nh-shadow-lg: 0 34px 70px -30px rgba(var(--ng-navy-rgb), .26); --nh-ease: cubic-bezier(.22, 1, .36, 1); /* ── L'ex-« or » de style.css = bleu de la charte (2026-09-27) ──────── Ces variables étaient neutralisées en encre noire (héritage LEMO) : badges « Bientôt », icônes de secteur, puces numérotées, onglets actifs et le « gui » du logo en pied de page restaient noirs. Elles suivent maintenant la charte (primary / primary-ring / navy). Le vert reste neutralisé plus bas (aucun texte vert). */ --gold: var(--ng-primary); --gold-bright: var(--ng-primary-ring); --gold-deep: var(--ng-navy); --gold-text: var(--ng-primary); /* ── Idem pour le vert utilisé comme texte ──────────────────────── Propriétaire : « aucune écriture en couleur vert ». style.css utilise --green-600/--green-700/--green-900 comme couleur de TEXTE/lien un peu partout (nav, wordmark, titres `.feat-hero`, liens légaux, badges…) — vérifié un par un qu'aucun des trois ne sert de fond significatif ailleurs (seul `--green-800` est un vrai fond de bouton `.btn-green`, volontairement PAS touché ici). Cette redéfinition couvre aussi les `style="color:var(--green-600)"` posés en inline (ex. `.eyebrow`) : une variable CSS redéfinie sur un ancêtre s'applique aussi aux `var()` écrits en attribut style. */ --green-600: var(--nh-ink-2); --green-700: var(--nh-ink); --green-900: var(--nh-ink); } /* Fond de page (2026-09-07, validé par le propriétaire) : style.css pose `body { background: var(--cream) }` (blanc pur, #ffffff) sur les 58 pages du site — ici, `.nh-home` (le de l'accueil uniquement) le remplace par le token neutre --nh-bg (#F4F5F7), déjà défini plus haut mais qui n'agissait jusque-là que dans les sections `.nh`, pas sur la page elle-même. Scopé à l'accueil : ne touche aucune autre page. */ .nh-home { background: var(--nh-bg); } .nh, .nh p, .nh li, .nh span { color: var(--nh-ink-2); } .nh h1, .nh h2, .nh h3, .nh h4 { color: var(--nh-ink); margin: 0; } .nh-wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .nh-section { padding: 88px 0; } .nh-center { text-align: center; } /* ── Animations ────────────────────────────────────────────── */ @keyframes nhFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -18px, 0); } } @keyframes nhShimmer { to { background-position: 220% 0; } } @keyframes nhDrift { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .55; } 50% { transform: translate3d(0, -14px, 0); opacity: 1; } } @keyframes nhRing { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } } /* ── HERO ──────────────────────────────────────────────────── */ .nh-hero { position: relative; overflow: hidden; padding: 84px 0 64px; background: radial-gradient(ellipse 52% 42% at 50% 44%, rgba(var(--ng-primary-soft-rgb), .95) 0%, transparent 68%), radial-gradient(ellipse at 84% 12%, rgba(var(--ng-primary-ring-rgb), .10) 0%, transparent 46%), radial-gradient(ellipse at 10% 80%, rgba(var(--ng-primary-ring-rgb), .09) 0%, transparent 44%), linear-gradient(180deg, #ffffff 0%, var(--nh-bg) 100%); } .nh-rings { position: absolute; width: 260px; height: 260px; border: 1px solid rgba(var(--ng-success-rgb), .22); border-radius: 50%; pointer-events: none; z-index: 0; } .nh-rings::before, .nh-rings::after { content: ""; position: absolute; border: 1px solid rgba(var(--ng-success-rgb), .16); border-radius: 50%; } .nh-rings::before { inset: 24px; } .nh-rings::after { inset: 50px; } .nh-rings-tr { top: -126px; right: -64px; } .nh-rings-bl { bottom: -150px; left: -86px; } .nh-spark { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; box-shadow: 0 2px 5px rgba(0, 0, 0, .12); animation: nhDrift 9s var(--nh-ease) infinite; } .nh-sp1 { width: 8px; height: 8px; background: #52ca82; top: 128px; left: 8.5%; } .nh-sp2 { width: 7px; height: 7px; background: #53b7d4; top: 208px; right: 10.5%; animation-delay: -1.5s; } .nh-sp3 { width: 6px; height: 6px; background: #9275c7; top: 60%; left: 11%; animation-delay: -3s; } .nh-sp4 { width: 7px; height: 7px; background: #4fc2a6; bottom: 21%; left: 6.5%; animation-delay: -4.5s; } .nh-sp5 { width: 6px; height: 6px; background: #d8c45e; bottom: 25%; right: 7.5%; animation-delay: -6s; } .nh-hero-copy { position: relative; z-index: 5; text-align: center; } .nh-hero-copy h1 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: clamp(38px, 5.2vw, 62px); line-height: 1.05; font-weight: 700; letter-spacing: -2.2px; text-wrap: balance; } .nh-accent { /* Calque LEMO : couleur plate, plus de dégradé de texte animé. */ background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--nh-green); animation: none; } .nh-sub { max-width: 760px; margin: 18px auto 0; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.42; color: var(--nh-ink-2); text-wrap: balance; } .nh-cta-row { display: flex; justify-content: center; gap: 14px; margin-top: 30px; } .nh-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 148px; padding: 14px 26px; border-radius: 16px; font-family: inherit; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; /* Calque LEMO : bouton plat, pas de lévitation au survol. */ transition: background .18s ease, border-color .18s ease; } .nh-btn:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 3px; } .nh-btn-primary { color: #fff; background: var(--nh-green); box-shadow: none; } .nh-btn-primary:hover { background: var(--nh-green-deep); } .nh-btn-secondary { color: var(--nh-ink); background: #fff; border-color: var(--nh-line); } .nh-btn-secondary:hover { border-color: #cfcabf; } .nh-btn-disabled, .nh-btn-disabled:hover { opacity: .55; cursor: not-allowed; pointer-events: none; transform: none; } .nh-fine { margin-top: 14px; font-size: 13px; color: var(--nh-ink-2); } /* ── Scène : dashboard + anneaux + cartes métiers ──────────── */ .nh-stage { position: relative; z-index: 3; margin-top: 46px; min-height: 470px; width: 100%; display: flex; align-items: center; justify-content: center; } @media (min-width: 1400px) { .nh-stage { width: calc(100% + 150px); margin-inline: -75px; } } .nh-glow { position: absolute; z-index: 0; top: 50%; left: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; /* Calque LEMO : un seul ton (bleu), plus de halo bicolore vert/bleu. */ background: radial-gradient(circle, rgba(var(--ng-primary-rgb), .30) 0%, transparent 72%); filter: blur(50px); opacity: 0; pointer-events: none; will-change: transform; transition: opacity .4s var(--nh-ease); } .nh-orbit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(var(--ng-primary-rgb), .32); pointer-events: none; z-index: 1; animation: nhRing 8s var(--nh-ease) infinite; } .nh-orbit-1 { width: 620px; height: 366px; } .nh-orbit-2 { width: 760px; height: 440px; border-color: rgba(var(--ng-primary-rgb), .22); animation-delay: -2.6s; } .nh-orbit-3 { width: 900px; height: 512px; border-color: rgba(var(--ng-primary-rgb), .16); animation-delay: -5.2s; } .nh-win { position: relative; z-index: 6; width: min(706px, 62vw); min-width: 590px; border: 5px solid rgba(255, 255, 255, .96); border-radius: 19px; background: #fff; overflow: hidden; box-shadow: var(--nh-shadow-lg), 0 8px 18px -10px rgba(var(--ng-navy-rgb), .14); transform: perspective(1500px) rotateX(1deg); } /* ── Mockup téléphone (captures réelles de l'app, 2026-09-04) ────── `.nh-win` garde sa classe (hooks JS tilt/halo + animation d'entrée inchangés) ; seul son contenu change : plus de faux dashboard desktop dessiné en CSS, un vrai cadre de téléphone avec 3 captures d'écran réelles en fondu. Le bandeau d'abonnement (état réel du compte de test) est masqué par `object-position` plutôt que retouché en image. */ .nh-win-phone { width: min(260px, 56vw); min-width: 0; aspect-ratio: 430 / 760; border-width: 9px; border-color: var(--nh-ink); border-radius: 38px; background: var(--nh-ink); } .nh-phone-notch { position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%); width: 76px; height: 20px; background: var(--nh-ink); border-radius: 0 0 13px 13px; } .nh-shots { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 28px; } .nh-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity 1.1s var(--nh-ease); } .nh-shot.is-active { opacity: 1; } .nh-shot:first-of-type { object-position: center bottom; } /* accueil : masque le bandeau d'abonnement du compte de démo */ .nh-shot-dots { position: absolute; z-index: 3; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; } .nh-shot-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .3s var(--nh-ease); } .nh-shot-dots i.on { background: #fff; } /* ── Cartes métiers satellites ─────────────────────────────── */ .nh-sat { position: absolute; z-index: 10; width: 112px; padding: 13px 9px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--nh-line-2); border-radius: 16px; /* Fenêtre flottante translucide (verre dépoli) plutôt qu'une carte pleine — cohérent avec l'effet verre déjà utilisé sur `.nav.scrolled`. */ background: rgba(255, 255, 255, .66); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--nh-shadow-md); font-size: 12px; font-weight: 600; color: var(--nh-ink); text-align: center; animation: nhFloat 6s var(--nh-ease) infinite; } .nh-sat svg { width: 25px; height: 25px; } /* `.nh-mw` (ajoutée pour rendre ces cartes cliquables) pose son propre `position: relative` plus bas dans cette feuille — à spécificité égale, la règle la plus basse gagne et écrasait le flottement en `absolute` des satellites (elles retombaient dans le flux normal, alignées en ligne). `.nh-sat.nh-mw` a une spécificité plus élevée : elle regagne. */ .nh-sat.nh-mw { position: absolute; } .nh-sat-1 { left: calc(50% - 582px); top: 58px; } .nh-sat-2 { left: calc(50% - 612px); bottom: 54px; animation-delay: -3s; } .nh-sat-3 { right: calc(50% - 582px); top: 40px; animation-delay: -1.5s; } .nh-sat-4 { right: calc(50% - 612px); bottom: 44px; animation-delay: -4.5s; } /* Entrée en cascade — équivalent de AnimationSystem.HeroEntrance */ .nh-stage.enter .nh-win { opacity: 0; transform: perspective(1500px) rotateX(1deg) translateY(36px); filter: blur(6px); transition: opacity .8s var(--nh-ease), transform .8s var(--nh-ease), filter .8s var(--nh-ease); } .nh-stage.enter.done .nh-win { opacity: 1; transform: perspective(1500px) rotateX(1deg) translateY(0); filter: none; } .nh-stage.enter .nh-kpi, .nh-stage.enter .nh-sat { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--nh-ease), transform .45s var(--nh-ease); } .nh-stage.enter.done .nh-kpi, .nh-stage.enter.done .nh-sat { opacity: 1; transform: translateY(0); } .nh-stage.enter .nh-sat { animation: none; } .nh-stage.enter.settled .nh-sat { animation: nhFloat 6s var(--nh-ease) infinite; } /* ── Blocs de contenu ──────────────────────────────────────── */ .nh-benefits { position: relative; z-index: 12; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 26px; } .nh-benefit { display: grid; grid-template-columns: 54px 1fr; gap: 20px; align-items: start; } .nh-benefit-ic { width: 54px; height: 54px; display: grid; place-items: center; border: 1.5px solid #45a76a; border-radius: 11px; color: #1e8a4c; /* Même verre dépoli que les cartes satellites : un badge flottant, pas un pavé plein. */ background: rgba(255, 255, 255, .5); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); } .nh-benefit-ic svg { width: 25px; height: 25px; } .nh-benefit h3 { margin: 4px 0 8px; font-size: 16px; font-weight: 700; line-height: 1.2; } .nh-benefit p { font-size: 13.5px; line-height: 1.45; } .nh-band-tint { background: radial-gradient(ellipse at 15% 0%, rgba(var(--ng-primary-ring-rgb), .10) 0%, transparent 48%), radial-gradient(ellipse at 85% 100%, rgba(var(--ng-primary-ring-rgb), .10) 0%, transparent 48%), var(--nh-tint); border-block: 1px solid var(--nh-line-2); } .nh-head { max-width: 640px; margin: 0 auto 42px; text-align: center; } .nh-head h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: clamp(26px, 3.1vw, 36px); font-weight: 700; letter-spacing: -1.2px; text-wrap: balance; } .nh-head p { margin-top: 12px; font-size: 16px; } .nh-mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .nh-mod { display: block; padding: 22px 18px; border: 1px solid var(--nh-line); border-radius: var(--nh-radius); background: #fff; box-shadow: var(--nh-shadow-sm); transition: transform .2s var(--nh-ease), box-shadow .2s var(--nh-ease), border-color .2s var(--nh-ease); } .nh-mod:hover { transform: translateY(-3px); border-color: #cfe6d8; box-shadow: var(--nh-shadow-md); } .nh-mod:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 3px; } .nh-mod .ic { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 11px; background: var(--nh-tint); border: 1px solid var(--nh-line-2); } .nh-mod .ic svg { width: 19px; height: 19px; } .nh-mod h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; } .nh-mod p { font-size: 13px; line-height: 1.45; } /* Calque LEMO — équivalent de "card-thematic" : ces 4 cartes représentent un secteur entier, comme les cartes "fields of application" de lemo.com, qui montrent une vraie photo plutôt qu'une icône. Provisoire : bloc marqué en attendant les vraies photos (2026-09-22). À retirer avec le pictogramme quand la photo réelle est fournie. */ .nh-mod-photo { aspect-ratio: 4 / 3; margin: -22px -18px 14px; background: repeating-linear-gradient(135deg, var(--nh-sunken), var(--nh-sunken) 10px, var(--nh-tint) 10px, var(--nh-tint) 20px); border-bottom: 1px solid var(--nh-line); display: flex; align-items: center; justify-content: center; padding: 12px; } .nh-mod-photo span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nh-ink-2); background: #fff; border: 1px dashed var(--nh-line); padding: 6px 10px; text-align: center; } .nh-field { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .nh-field-i { display: grid; grid-template-columns: 44px 1fr; gap: 15px; align-items: start; } .nh-field-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--nh-line); color: var(--nh-green-deep); } .nh-field-ic svg { width: 20px; height: 20px; } .nh-field-i h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; line-height: 1.25; } .nh-field-i p { font-size: 13px; line-height: 1.45; } .nh-partners { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding: 34px 36px; border: 1px solid var(--nh-line); border-radius: 24px; background: #fff; box-shadow: var(--nh-shadow-sm); } .nh-partners h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.8px; } .nh-partners p { margin-top: 8px; font-size: 15px; max-width: 560px; } .nh-final { position: relative; overflow: hidden; padding: 56px 40px; border: 1px solid var(--nh-line); border-radius: 26px; background: radial-gradient(ellipse at 50% 0%, rgba(var(--ng-primary-ring-rgb), .16) 0%, transparent 62%), linear-gradient(180deg, #ffffff, var(--nh-tint)); text-align: center; } .nh-final h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -1.1px; text-wrap: balance; } .nh-final p { max-width: 520px; margin: 12px auto 26px; font-size: 16px; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 1399px) { .nh-sat-1 { left: 6px; top: 58px; } .nh-sat-2 { left: 0; bottom: 54px; } .nh-sat-3 { right: 6px; top: 40px; } .nh-sat-4 { right: 0; bottom: 44px; } } @media (max-width: 1000px) { .nh-sat { width: 100px; padding: 13px 8px 12px; gap: 6px; font-size: 11px; } .nh-sat svg { width: 22px; height: 22px; } .nh-orbit-1 { width: 78vw; height: 330px; } .nh-orbit-2 { width: 92vw; height: 396px; } .nh-orbit-3 { width: 106vw; height: 458px; } .nh-mods { grid-template-columns: repeat(2, 1fr); } .nh-field { grid-template-columns: repeat(2, 1fr); gap: 26px; } } @media (max-width: 820px) { .nh-hero { padding: 58px 0 48px; } .nh-hero-copy h1 { letter-spacing: -1.6px; } .nh-stage { min-height: 430px; margin-top: 34px; } .nh-benefits { grid-template-columns: 1fr; gap: 22px; margin-top: 30px; max-width: 520px; margin-inline: auto; } .nh-section { padding: 58px 0; } .nh-sat-1 { left: 0; top: 52px; } .nh-sat-2 { left: 0; bottom: 54px; } .nh-sat-3 { right: 0; top: 24px; } .nh-sat-4 { right: 0; bottom: 40px; } } @media (max-width: 640px) { .nh-cta-row { flex-direction: column; align-items: center; gap: 10px; } .nh-btn { width: min(260px, 100%); } .nh-stage { min-height: 320px; margin-top: 28px; } .nh-win-phone { border-width: 6px; border-radius: 26px; } .nh-shots { border-radius: 18px; } .nh-sat { width: 68px; padding: 9px 5px 8px; border-radius: 11px; font-size: 8px; gap: 4px; } .nh-sat svg { width: 16px; height: 16px; } .nh-sat-1 { left: 0; top: 92px; } .nh-sat-2 { left: 0; bottom: 46px; } .nh-sat-3 { right: 0; top: 18px; } .nh-sat-4 { right: 0; bottom: 34px; } .nh-orbit-1 { width: 92vw; height: 208px; } .nh-orbit-2 { width: 108vw; height: 246px; } .nh-orbit-3 { width: 126vw; height: 286px; } .nh-benefit { grid-template-columns: 50px 1fr; gap: 14px; } .nh-benefit-ic { width: 50px; height: 50px; } .nh-benefit-ic svg { width: 24px; height: 24px; } .nh-mods, .nh-field { grid-template-columns: 1fr; } .nh-field { gap: 22px; } .nh-final { padding: 40px 22px; } .nh-partners { padding: 26px 22px; } .nh-rings { width: 170px; height: 170px; } } @media (prefers-reduced-motion: reduce) { .nh-sat, .nh-spark, .nh-orbit, .nh-accent { animation: none !important; } .nh-btn, .nh-mod { transition: none !important; } .nh-stage.enter .nh-win, .nh-stage.enter .nh-kpi, .nh-stage.enter .nh-sat { opacity: 1 !important; transform: none !important; filter: none !important; } } /* ── FAQ repliable (2026-09-04) ──────────────────────────────── 10 questions rendaient la section trop longue à parcourir : les 5 dernières sont masquées derrière un bouton « Voir les 5 autres questions », géré par home.js (aucune dépendance à app.js qui gère déjà l'ouverture/fermeture individuelle de chaque question). */ .nh-faq-more { display: none; } .nh-faq-more.is-open { display: block; } .nh-faq-toggle { display: flex; align-items: center; gap: 8px; margin: 18px auto 0; padding: 12px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); } .nh-faq-toggle:hover { border-color: var(--nh-green, var(--ng-primary)); background: var(--nh-green-pale, var(--ng-primary-soft)); } .nh-faq-toggle svg { width: 16px; height: 16px; transition: transform .22s var(--ease); } .nh-faq-toggle.is-open svg { transform: rotate(180deg); } /* ── RTL (pages ar/) ────────────────────────────────────────── Le méga-menu nh- utilise des chevrons SVG dessinés pointant vers la droite (`nh-mw-go`, `nav-caret`) : sur une page `dir="rtl"`, le sens de lecture s'inverse, ces flèches doivent donc pointer vers la gauche. Pas d'équivalent avant cette page (l'ancien design AR utilisait des flèches texte "←" déjà correctement orientées à la main). */ [dir="rtl"] .nav-caret, [dir="rtl"] .nh-mw-go { transform: scaleX(-1); } /* ═══════════════════════════════════════════════════════════════════ BARRE DE NAVIGATION — alignée sur l'app Flutter mansa_app_bar_responsive.dart : `backgroundColor: MansaColors.background` (ivoire), `elevation: 0`, et un commentaire daté 2026-09-03 qui explique que le filet dégradé or→vert a été RETIRÉ de l'app — « neutre au repos, la couleur signale l'état ». style.css peint pourtant encore la barre avec --brand-gradient. On répare ici, pour l'accueil seulement (les 56 autres pages gardent leur barre actuelle : les toucher sortirait du périmètre demandé). La classe `.scrolled` est posée par app.js (déjà en place) : on ne rebranche rien, on lui donne une vraie animation. ═══════════════════════════════════════════════════════════════════ */ .nh-home .nav { padding: 7px 0; background: var(--ng-bg); /* MansaColors.background */ border-bottom: 1px solid var(--nh-line-2); box-shadow: none; transition: padding .3s var(--nh-ease), background .3s var(--nh-ease), box-shadow .3s var(--nh-ease), border-color .3s var(--nh-ease), backdrop-filter .3s var(--nh-ease), transform .32s var(--nh-ease); } .nh-home .nav.scrolled { padding: 0; /* la barre se resserre */ background: rgba(var(--ng-bg-rgb), .82); backdrop-filter: blur(16px) saturate(1.18); -webkit-backdrop-filter: blur(16px) saturate(1.18); border-bottom-color: rgba(var(--ng-navy-rgb), .10); box-shadow: 0 12px 30px -20px rgba(var(--ng-navy-rgb), .55); } .nh-home .nav .brand img { transition: height .3s var(--nh-ease); } .nh-home .nav.scrolled .brand img { height: 34px !important; } /* Se cache en défilant vers le bas, revient en remontant — même logique que `_chrome`/`_showChrome`/`_hideChrome` de main_shell.dart (direction du geste, pas position absolue). Géré par home.js. */ .nh-home .nav.nh-hide { transform: translateY(-100%); } /* ── Effet d'onde au clic (« flaque d'eau ») ────────────────────── C'est l'InkWell de Flutter : l'app entière réagit au toucher par une onde qui part du point de contact. Le site n'avait aucun retour tactile. Le cercle est injecté par home.js puis se retire tout seul. */ .nh-ripple-host { position: relative; overflow: hidden; } .nh-ripple { position: absolute; border-radius: 50%; transform: scale(0); opacity: .38; pointer-events: none; background: currentColor; animation: nhRipple .58s var(--nh-ease) forwards; } .nh-btn-primary .nh-ripple { background: #fff; opacity: .34; } @keyframes nhRipple { to { transform: scale(2.6); opacity: 0; } } /* ── Boutons : profondeur en couches + appui physique ───────────── */ .nh-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .22s var(--nh-ease), box-shadow .22s var(--nh-ease), background .22s var(--nh-ease), filter .22s var(--nh-ease); } .nh-btn-primary { box-shadow: 0 1px 1px rgba(var(--ng-navy-rgb), .18), 0 4px 10px -3px rgba(var(--ng-success-rgb), .40), 0 14px 28px -12px rgba(var(--ng-success-rgb), .52), inset 0 1px 0 rgba(255, 255, 255, .26); } .nh-btn-primary:hover { box-shadow: 0 1px 1px rgba(var(--ng-navy-rgb), .20), 0 6px 14px -4px rgba(var(--ng-success-rgb), .46), 0 20px 38px -14px rgba(var(--ng-success-rgb), .58), inset 0 1px 0 rgba(255, 255, 255, .30); } .nh-btn-secondary { box-shadow: 0 1px 1px rgba(var(--ng-text-rgb), .05), 0 6px 16px -10px rgba(var(--ng-text-rgb), .30); } .nh-btn-secondary:hover { background: #fff; box-shadow: 0 1px 1px rgba(var(--ng-text-rgb), .06), 0 10px 24px -12px rgba(var(--ng-text-rgb), .38); } /* Appui : le bouton s'enfonce, l'ombre se rétracte. */ .nh-btn:active { transform: translateY(1px) scale(.985); box-shadow: 0 1px 1px rgba(var(--ng-navy-rgb), .18), 0 2px 6px -2px rgba(var(--ng-success-rgb), .34); } /* Les cartes métiers deviennent aussi tactiles, même langage. */ .nh-mod { position: relative; overflow: hidden; isolation: isolate; color: var(--nh-ink); } .nh-mod h3, .nh-mod p { color: inherit; } .nh-mod h3 { color: var(--nh-ink); } .nh-mod p { color: var(--nh-ink-2); } .nh-mod:active { transform: translateY(-1px) scale(.994); } @media (prefers-reduced-motion: reduce) { .nh-ripple { display: none; } .nh-home .nav, .nh-home .nav .brand img { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════ MEGA-MENUS — sous-fenêtres de navigation Portée : accueil uniquement (`.nh-home`). Les 56 autres pages gardent leur mega-menu actuel — les toucher sortirait du périmètre. Principe repris du Design System de l'app : NEUTRE AU REPOS, la couleur ne sert qu'à signaler l'état. Chaque widget porte sa teinte dans `--mw` (variable locale posée en style inline) ; elle n'apparaît qu'au survol. Jamais de texte coloré sur fond de la même teinte. ═══════════════════════════════════════════════════════════════════ */ .nh-home .nav-mega.nh-mega { padding: 22px; border: 1px solid var(--nh-line-2); border-radius: 22px; background: #fff; box-shadow: 0 2px 6px -2px rgba(var(--ng-navy-rgb), .10), 0 24px 48px -20px rgba(var(--ng-navy-rgb), .26), 0 48px 90px -50px rgba(var(--ng-navy-rgb), .30); /* Ouverture : glisse vers le bas en s'estompant vers le net. */ transform: translateY(-10px) scale(.985); transform-origin: top center; opacity: 0; visibility: hidden; transition: opacity .24s var(--nh-ease), transform .3s var(--nh-ease), visibility .3s; } .nh-home .nav-item:hover .nav-mega.nh-mega, .nh-home .nav-item:focus-within .nav-mega.nh-mega { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* Pont invisible : le curseur peut descendre du lien vers la sous-fenêtre sans la faire disparaître au passage. */ .nh-home .nav-item .nav-mega.nh-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* Panneaux de taille raisonnable : une sous-fenêtre de navigation, pas un méga-panneau pleine largeur. */ .nh-mega-sm { width: 372px; } .nh-mega-md { width: 520px; } .nh-mega-lg { width: min(660px, calc(100vw - 48px)); } .nh-mega-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--nh-ink); margin-bottom: 10px; } .nh-mega-aside h3 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 10px; } .nh-mega-lead { font-size: 13.5px; line-height: 1.5; color: var(--nh-ink-2); } .nh-mega-head { padding: 2px 4px 14px; } .nh-mega-aside { display: flex; flex-direction: column; } .nh-mega-aside-r { border-left: 1px solid var(--nh-line-2); padding-left: 22px; } .nh-mega-aside .nh-mega-cta { margin-top: auto; } .nh-mega-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--nh-line-2); } .nh-mega-rows { display: grid; gap: 6px; } .nh-mega-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; } .nh-cards-2 { grid-template-columns: 1fr 1fr; } .nh-mw-wide { grid-column: 1 / -1; } /* ── Widget : neutre au repos ──────────────────────────────────── */ /* ⚠️ style.css:219 pose `.nav-links a { display:inline-flex }` (0,1,1) et `.nav-links a::after` ajoute un soulignement animé à TOUT lien de la navigation — y compris aux widgets. Il faut donc sélectionner avec au moins la même spécificité et neutraliser ce soulignement, sinon les cartes s'affichent en ligne et se soulignent au survol. */ .nh-home .nav-links a.nh-mw, .nh-home .nav-links a.nh-mega-cta { font-size: inherit; font-weight: inherit; color: inherit; } /* Le padding est repris ici à la même spécificité que le reset ci-dessus, sinon `.nav-links a { padding: 6px 0 }` de style.css écrase celui des widgets et les cartes se retrouvent sans marge intérieure. */ .nh-home .nav-links a.nh-mw-card { padding: 20px 17px 18px; } .nh-home .nav-links a.nh-mw-row, .nh-home .nav-links a.nh-mw-mini { padding: 13px 14px; } .nh-home .nav-links a.nh-mega-cta { padding: 12px 14px; } .nh-home .nav-links a.nh-mw::after, .nh-home .nav-links a.nh-mega-cta::after { content: none; } .nh-home .nav-links a.nh-mw { display: block; } .nh-home .nav-links a.nh-mw-row, .nh-home .nav-links a.nh-mw-mini, .nh-home .nav-links a.nh-mega-cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; } .nh-home .nav-mega .nh-mw-ic { flex: 0 0 auto; } .nh-mw { position: relative; overflow: hidden; isolation: isolate; display: block; border: 1px solid transparent; border-radius: 16px; background: #fff; text-decoration: none; transition: transform .26s var(--nh-ease), border-color .26s var(--nh-ease), box-shadow .26s var(--nh-ease), background .26s var(--nh-ease); } .nh-mw strong { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--nh-ink); transition: color .26s var(--nh-ease); } .nh-mw em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--nh-ink-2); } .nh-mw-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 16px; background: var(--nh-sunken); color: var(--nh-ink-2); /* sobre au repos */ transition: background .26s var(--nh-ease), color .26s var(--nh-ease), transform .26s var(--nh-ease); } .nh-mw-ic.sm { width: 34px; height: 34px; border-radius: 14px; } .nh-mw-ic svg { width: 20px; height: 20px; } .nh-mw-ic.sm svg { width: 16px; height: 16px; } .nh-mw-go { width: 14px; height: 14px; flex: 0 0 14px; margin-left: auto; color: var(--nh-ink-2); opacity: .45; transition: opacity .26s var(--nh-ease), transform .26s var(--nh-ease), color .26s var(--nh-ease); } /* ── Survol — Calque LEMO (2026-09-22) : un seul accent bleu partout, plus une couleur différente par secteur (rouge/orange/violet/etc). Le `--mw` posé en inline par secteur reste dans le HTML (autres usages possibles) mais n'est plus lu ici — accent fixe --primary-500 réel de LEMO, pas de lévitation ni d'ombre colorée (surfaces plates). */ .nh-mw:hover, .nh-mw:focus-visible { transform: none; border-color: var(--nh-green); background: var(--nh-tint); box-shadow: none; } .nh-mw:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 2px; } .nh-mw:hover .nh-mw-ic, .nh-mw:focus-visible .nh-mw-ic { background: var(--nh-green-pale); color: var(--nh-green-deep); transform: none; } /* Le titre reste anthracite : pas de texte coloré sur fond de la même teinte. Seuls l'icône et le chevron prennent la couleur. */ .nh-mw:hover .nh-mw-go, .nh-mw:focus-visible .nh-mw-go { color: var(--nh-green); opacity: 1; transform: translateX(3px); } /* Variantes de disposition */ .nh-mw-row, .nh-mw-mini { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; /* Ombre au repos (2026-09-07) : compactées en lignes plates (cartes → .nh-mw-mini), elles se fondaient dans le panneau sans affordance cliquable avant le survol. Neutre (--nh-shadow-sm, déjà utilisé par .nh-mod) — la couleur reste réservée au survol, cf. règle du chantier. */ box-shadow: var(--nh-shadow-sm); } .nh-mw-row .nh-mw-body strong, .nh-mw-mini > span strong { margin-bottom: 2px; } .nh-mw-card { padding: 16px 14px 15px; } .nh-mw-card .nh-mw-ic { margin-bottom: 11px; } .nh-mw-card strong { margin-bottom: 5px; } .nh-mega-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--nh-line-2); border-radius: 16px; background: var(--nh-tint); text-decoration: none; transition: transform .26s var(--nh-ease), border-color .26s var(--nh-ease), box-shadow .26s var(--nh-ease); } .nh-mega-cta strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--nh-ink); } .nh-mega-cta em { display: block; font-style: normal; font-size: 12px; color: var(--nh-ink-2); } .nh-mega-cta .nh-mw-ic { background: #fff; color: var(--nh-green-deep); } .nh-mega-cta:hover { transform: none; border-color: var(--nh-green); box-shadow: none; } .nh-mega-cta:hover .nh-mw-go { color: var(--nh-green-deep); opacity: 1; transform: translateX(3px); } /* ── « Boule d'eau » : halo doux qui suit le curseur ───────────── */ .nh-drop { /* Calque LEMO : pas de halo qui suit le curseur — surfaces plates, jamais de glow, et un seul accent (pas une couleur par secteur). */ display: none; position: absolute; z-index: -1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: none; filter: none; opacity: 0; pointer-events: none; /* Pas de transition sur `transform` : c'est home.js qui interpole image par image pour obtenir le glissement. Une transition CSS en plus ajouterait un second retard et rendrait le halo mou. */ transition: opacity .3s var(--nh-ease); will-change: transform; } .nh-mw:hover .nh-drop { opacity: 1; } @media (max-width: 720px) { .nh-mega-cards, .nh-cards-2 { grid-template-columns: 1fr; } } /* ── Panneau mobile : scrollable + couleurs harmonisées ─────────── `.mobile-menu` (style.css:947) a `inset:66px 0 auto 0` sans hauteur ni overflow : avec les accordéons ci-dessous ouverts, le contenu dépasse l'écran et devient inatteignable (ni scroll de la page, qui ne fait pas défiler un élément `fixed`, ni scroll interne). Rendu scrollable dans la limite de l'écran. Le burger et le sélecteur de langue utilisaient encore `--green-900`/rgba(0, 93, 170,..) de l'ancienne palette au lieu du vert `nh-` du reste de l'accueil. */ .nh-home .mobile-menu { max-height: calc(100vh - 66px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nh-home .burger { background: color-mix(in srgb, var(--nh-green-deep) 8%, transparent); border-color: color-mix(in srgb, var(--nh-green-deep) 22%, transparent); } .nh-home .burger span, .nh-home .burger span::before, .nh-home .burger span::after { background: var(--nh-green-deep); } .nh-home .lang-dd-trigger { background: color-mix(in srgb, var(--nh-green-deep) 7%, transparent); border-color: color-mix(in srgb, var(--nh-green-deep) 18%, transparent); color: var(--nh-ink); } .nh-home .lang-dd-menu { border-color: color-mix(in srgb, var(--nh-green-deep) 14%, transparent); } .nh-home .link-ghost { color: var(--nh-ink); } /* ── Menu mobile en accordéon ───────────────────────────────────── Sans souris, il n'y a pas de survol pour révéler le méga-menu : sans ceci, "Pourquoi"/"Secteurs"/… ne faisaient que défiler vers le résumé de l'accueil, sans aucun moyen d'atteindre les vraies pages secteur ou ecosysteme.html. `

` natif : accessible clavier/lecteur d'écran sans JS à écrire. */ .mm-acc { border-bottom: 1px solid var(--nh-line-2); } .mm-acc summary { padding: 13px 4px; font-weight: 600; font-size: 16px; color: var(--nh-ink); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .mm-acc summary::-webkit-details-marker { display: none; } .mm-acc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--nh-ink-2); border-bottom: 2px solid var(--nh-ink-2); transform: rotate(45deg); transition: transform .2s var(--nh-ease); flex-shrink: 0; } .mm-acc[open] summary::after { transform: rotate(-135deg); } .mm-acc-panel { display: flex; flex-direction: column; padding: 2px 4px 14px 14px; } .mm-acc-panel a { padding: 10px 0; font-weight: 500; font-size: 14.5px; color: var(--nh-ink-2); border-bottom: none !important; } .mm-acc-panel a:hover, .mm-acc-panel a:active { color: var(--nh-ink); } @media (prefers-reduced-motion: reduce) { .mm-acc summary::after { transition: none; } } /* Item plat du menu mobile (ex. Blog, 2026-09-04) : même style qu'un `.mm-acc summary` mais sans chevron ni panneau — une destination directe, pas une catégorie à déplier. */ .mm-flat-link { display: block; padding: 13px 4px; font-weight: 600; font-size: 16px; color: var(--nh-ink); border-bottom: 1px solid var(--nh-line-2); } /* ═══════════════════════════════════════════════════════════════════ AJUSTEMENTS DEMANDÉS (2026-09-04) Widgets agrandis et colorés · ombres sur les lignes cliquables · moins d'or en bas de page. ═══════════════════════════════════════════════════════════════════ */ /* ── Widgets plus grands et plus présents ──────────────────────── */ .nh-mega-cards { gap: 12px; } .nh-mw-card { padding: 20px 17px 18px; } .nh-mw-card .nh-mw-ic { width: 50px; height: 50px; border-radius: 14px; margin-bottom: 13px; } .nh-mw-card .nh-mw-ic svg { width: 24px; height: 24px; } .nh-mw-card strong { font-size: 15px; } .nh-mw-card em { font-size: 13px; } .nh-mw-row, .nh-mw-mini { padding: 13px 14px; gap: 14px; } .nh-mw-row .nh-mw-ic { width: 48px; height: 48px; border-radius: 14px; } .nh-mw-row .nh-mw-ic svg { width: 23px; height: 23px; } .nh-mw-row .nh-mw-body strong { font-size: 14.5px; } .nh-mw-row .nh-mw-body em { font-size: 13px; } /* Calque LEMO (2026-09-22) : cette règle, plus tardive dans le fichier, écrasait silencieusement le "sobre au repos" voulu plus haut — c'est elle qui colorait chaque ligne d'une teinte différente par secteur, au repos ET au survol. LEMO n'a qu'un seul accent bleu, jamais de couleur par catégorie : neutre au repos, bleu au survol, surfaces plates (pas de lévitation ni d'ombre colorée). */ .nh-mw { background: #fff; border-color: var(--nh-line); box-shadow: none; } .nh-mw .nh-mw-ic { background: var(--nh-sunken); color: var(--nh-ink-2); } .nh-mw:hover, .nh-mw:focus-visible { transform: none; border-color: var(--nh-green); background: var(--nh-tint); box-shadow: none; } .nh-mw:active { transform: none; } .nh-mega-cta { box-shadow: none; /* calque LEMO : surfaces plates */ } /* ── Moins d'or en bas de page ─────────────────────────────────── */ /* `.btn-green:hover` passe par `--green-700` (style.css:409), redéfini ci-dessus en encre neutre pour le texte : sans ceci son survol devenait gris au lieu de rester vert (c'est un FOND de bouton, pas du texte — légitime de le garder vert). */ .nh-home .btn-green:hover { background: var(--nh-green-deep); } /* `.cell-status.ok`/`.fam-op` codent leur vert en littéral (#17744C), pas via une variable — invisibles pour la redéfinition ci-dessus. */ .nh-home .cell-status.ok, .nh-home .fam-op { color: var(--nh-ink); } /* ⚠️ style.css redéfinit `.footer` une SECONDE fois (ligne ~2243) en pied CLAIR : `background: var(--brand-gradient)` et `color: var(--ink-soft)`, avec tous les enfants (h5, liens, boutons) en texte foncé. Une première version de ce bloc forçait le fond en vert sombre sans toucher aux textes : contraste tombé à 1,4:1, pied illisible. On garde donc le pied clair et on se contente de retirer l'or du dégradé — ce qui est exactement ce qui était demandé. */ .nh-home .footer { /* Signalé par le propriétaire (capture annotée) : le vert couvrait tout le footer, jugé trop présent. Le corps du footer (marque, colonnes de liens) repasse en blanc ; seule la ligne du bas (copyright) garde une bande de couleur — limite exactement à l'endroit marqué. */ background: #fff; border-top: 1px solid rgba(var(--ng-primary-rgb), .15); /* style.css:741 pose 72px/36px de padding + 52px de marge avant la ligne du bas : le pied de page prenait ~470px. Resserré. */ padding: 48px 0 0; } .nh-home .footer-grid { gap: 32px; } .nh-home .footer-about { max-width: 38ch; } .nh-home .footer-bottom { margin-top: 30px; padding-top: 18px; padding-bottom: 18px; border-top-color: rgba(var(--ng-primary-rgb), .12); /* Bande pleine largeur qui sort du conteneur centré `.wrap` — technique standard de "breakout" (marges négatives compensées par un padding égal), pour que la couleur touche les deux bords de l'écran comme le reste du footer le faisait avant. */ background: var(--nh-tint); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50% + 40px); padding-right: calc(50vw - 50% + 40px); } /* Propriétaire : aucun texte en vert nulle part — seuls les fonds/bordures décoratifs et les icônes graphiques gardent l'accent vert, jamais un mot lisible. */ .nh-home .footer-wordmark b { color: var(--ng-primary); } /* « gui » bleu, comme le logo du header */ .nh-home .footer .brand i { color: var(--ng-primary); } .nh-home .footer-btn-gold { /* Calque LEMO : aplat bleu uni, plus de dégradé vert. */ background: var(--nh-green); color: #fff; } .nh-home .footer-btn-gold:hover { background: var(--nh-green-deep); } .nh-home .footer-contact-btn { color: var(--nh-ink); border-color: rgba(var(--ng-primary-rgb), .45); } .nh-home .footer-contact-btn:hover { background: rgba(var(--ng-primary-rgb), .10); border-color: rgba(var(--ng-primary-rgb), .65); } .nh-home .footer-contact-btn-disabled, .nh-home .footer-contact-btn-disabled:hover { opacity: .55; cursor: not-allowed; pointer-events: none; background: none; } .nh-home .footer ul a:hover, .nh-home .footer-legal a:hover { color: var(--nh-ink); } .nh-home .footer-bottom .socials a:hover { color: var(--nh-green-dark); } /* style.css met la ligne du bas en --ink-faint (#1A1A1A) : 3,5:1 sur ce fond, soit le gris pâle proscrit. Ramené à l'encre secondaire foncée. */ .nh-home .footer-bottom { color: var(--nh-ink-2); } .nh-home .footer-legal a { color: var(--nh-ink-2); } /* ── Nav minimale des pages légales : recolorée, structure conservée ── Sur les 7 pages purement légales (confidentialité, CGU, CGV, mentions légales, cookies, suppression de compte, 404), le méga-menu complet resterait une distraction pendant la lecture d'un texte juridique — décision explicite du propriétaire de garder cette nav minimale, juste recolorée pour rester cohérente avec le reste du site. */ /* Propriétaire : la barre du haut doit être ivoire comme l'accueil sur TOUTES les pages, pages légales incluses (pas de traitement à part) — remplace le dégradé vert utilisé précédemment. Même fond, même effet verre au scroll, même repli au défilement que `.nh-home .nav` (dupliqué plutôt que fusionné : `.nav` et `.legal-nav` ont des structures internes différentes, seules les couleurs/transitions sont communes). */ .nh-home .legal-nav { padding: 7px 0; background: var(--ng-bg); border-bottom-color: var(--nh-line-2); box-shadow: none; transition: padding .3s var(--nh-ease), background .3s var(--nh-ease), box-shadow .3s var(--nh-ease), border-color .3s var(--nh-ease), backdrop-filter .3s var(--nh-ease), transform .32s var(--nh-ease); } .nh-home .legal-nav .wrap { transition: height .3s var(--nh-ease); } .nh-home .legal-nav.scrolled { padding: 0; background: rgba(var(--ng-bg-rgb), .82); backdrop-filter: blur(16px) saturate(1.18); -webkit-backdrop-filter: blur(16px) saturate(1.18); border-bottom-color: rgba(var(--ng-navy-rgb), .10); box-shadow: 0 12px 30px -20px rgba(var(--ng-navy-rgb), .55); } .nh-home .legal-nav.scrolled .wrap { height: 52px; } .nh-home .legal-nav.nh-hide { transform: translateY(-100%); } .nh-home .legal-nav-back { color: var(--nh-ink); border-color: color-mix(in srgb, var(--nh-green-deep) 30%, transparent); } .nh-home .legal-nav-back:hover { color: var(--nh-ink); border-color: color-mix(in srgb, var(--nh-green-deep) 55%, transparent); } /* ── Gabarit pages secteur (.feat-*) : or restant + blocs trop grands ── Signalé par le propriétaire (captures pharmacie.html) : le bandeau `.feat-hero` finissait toujours sur #9A5A00 (or), le 1ᵉʳ bloc de la grille de fonctionnalités (`.feat-item.featured`) a un halo or à 12% d'opacité, l'encart `.feat-alert`, les puces numérotées `.feat-step-num` et le bloc `.feat-cta-block` sont tous teintés or. Recolorés en vert, même recette que le footer/la bannière cookies. Tailles réduites en même temps (padding, icônes) — ces blocs prenaient trop de place. */ /* Calque LEMO (2026-09-23) : la vraie sous-page LEMO a un hero plein cadre sombre avec titre superposé en bas — cette règle, plus spécifique, écrasait silencieusement le nouveau style de style.css (padding/fond clairs hérités de l'ancienne maquette). Alignée dessus plutôt que de garder une variante "accueil" différente. */ .nh-home .feat-hero { padding: 34px; min-height: 380px; } .nh-home .feat-hero-icon { display: none; } .nh-home .feat-alert { background: color-mix(in srgb, var(--nh-green-deep) 6%, transparent); border-color: color-mix(in srgb, var(--nh-green-deep) 20%, transparent); padding: 15px 20px; } .nh-home .feat-item { padding: 15px; } .nh-home .feat-item.featured { padding: 20px 22px; } .nh-home .feat-item.featured::before { background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--nh-green) 14%, transparent), transparent 60%); } .nh-home .feat-item-icon { width: 34px; height: 34px; } .nh-home .feat-item-icon svg { width: 17px; height: 17px; } .nh-home .feat-item.featured .feat-item-icon { width: 48px; height: 48px; } .nh-home .feat-item.featured .feat-item-icon svg { width: 24px; height: 24px; } .nh-home .feat-steps { padding: 20px 24px; } .nh-home .feat-step-num { background: var(--ng-primary-soft); color: var(--ng-primary); } .nh-home .feat-cta-block { background: linear-gradient(135deg, color-mix(in srgb, var(--nh-green) 9%, transparent), color-mix(in srgb, var(--nh-green) 3%, transparent)); border-color: color-mix(in srgb, var(--nh-green) 22%, transparent); padding: 24px; } /* Suite du même nettoyage, trouvée par un passage systématique sur les 24 pages FR (pas seulement pharmacie.html) : bandeau/badge "Bientôt" (salon/bar/immobilier/livraison), teintes d'icônes par secteur, tags de l'écosystème, formulaire "intéressé par ce module" — tous en `rgba(...)` littéral (pas la variable `--gold*`), donc pas couverts par sa redéfinition plus haut. Passés au même gris-vert neutre que `.ic-neutral` (déjà dans style.css) plutôt qu'au vert : ce sont des statuts informatifs, pas des CTA, une couleur d'accent trop appuyée suggérerait à tort une action possible. */ .nh-home .feat-soon-banner { background: color-mix(in srgb, var(--nh-ink-2) 6%, transparent); border-color: color-mix(in srgb, var(--nh-ink-2) 18%, transparent); } .nh-home .feat-soon-badge { background: color-mix(in srgb, var(--nh-ink-2) 12%, transparent); } .nh-home .ic-bar, .nh-home .ic-resto, .nh-home .ic-commerce { background: var(--ng-primary-soft); } .nh-home .fam-pi { background: var(--ng-primary-soft); } .nh-home .cell-status.later { background: color-mix(in srgb, var(--nh-ink-2) 12%, transparent); } .nh-home .mi-form { background: color-mix(in srgb, var(--nh-green) 5%, transparent); border-color: color-mix(in srgb, var(--nh-green) 20%, transparent); } .nh-home .lang-dd-menu button.on { background: var(--ng-primary-soft); } .nh-home .ch-ic { background: var(--ng-primary-soft) !important; } /* ── Bannière cookies : même nettoyage que le footer ──────────────── Le dégradé de base finit sur #9A5A00 (or) et le bouton "Accepter" est un dégradé or plein (#3a2c06 sur or) — oubliés lors du premier passage anti-or. Même recette que .nh-home .footer : dégradé vert→neutre, bouton plein vert. Le texte gris `--ink-soft` est aussi proscrit ici. */ .nh-home .cookie-banner { /* Calque LEMO : aplat blanc, plus de dégradé multicolore. */ background: #fff; border-top-color: var(--nh-line); /* style.css:835 pose 14px/32px de padding + 20px de gap : avec la ligne "cookies strictement nécessaires" qui passe toujours à la ligne (`.cookie-categories{flex:1 1 100%}`), la bannière atteignait ~166px pour 3 lignes. Resserré sans rien cacher. */ padding: 11px 24px; gap: 10px; } .nh-home .cookie-category { font-size: 11.5px; } .nh-home .cookie-banner p { color: var(--nh-ink-2); } .nh-home .cookie-text a { color: var(--nh-ink); text-decoration: underline; } .nh-home .cookie-category input[type="checkbox"] { accent-color: var(--nh-green-deep); } .nh-home .cookie-btn-accept { /* Calque LEMO : aplat bleu uni, plus de dégradé vert. */ background: var(--nh-green); color: #fff; } .nh-home .cookie-btn-accept:hover { background: var(--nh-green-deep); } /* Bouton "Commencer" de la nav/du menu mobile : même `.btn-gold` que le reste du site. Calque LEMO (2026-09-22) : aplat bleu uni, plus de dégradé vert ni de halo — cette règle réintroduisait un vert codé en dur qui écrasait silencieusement le bleu défini par --gold. */ .nh-home .btn-gold { background: var(--nh-green); color: #fff; box-shadow: none; } .nh-home .btn-gold:hover { background: var(--nh-green-deep); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .nh-home .nav-mega.nh-mega, .nh-mw, .nh-mw-ic, .nh-mw-go, .nh-mega-cta { transition: none !important; } .nh-drop { display: none; } }