/* ==========================================================================
N.J.S — Network Job Services
Marketing site V1 proto, stack HTML5 + CSS3 + JS vanilla
Tokens issus de la charte Claude Design v1.0, composants étendus v1.1
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Manrope:wght@400;500;600;700;800&display=swap');
/* =========================================================================
1. TOKENS (charte v1.0)
========================================================================= */
:root {
/* Brand slate */
--color-slate-50: #F4F6F8;
--color-slate-100: #E6EAEF;
--color-slate-200: #C9D1DA;
--color-slate-300: #A4B0BD;
--color-slate-400: #6F7E8D;
--color-slate-500: #4A5764;
--color-slate-600: #394048;
--color-slate-700: #2E3A47;
--color-slate-800: #1F2A35;
--color-slate-900: #131C25;
--color-slate-950: #0A1019;
/* Brand orange */
--color-orange-50: #FFF5EC;
--color-orange-100: #FFE5CC;
--color-orange-200: #FDC791;
--color-orange-300: #FAA557;
--color-orange-400: #F58F30;
--color-orange-500: #F58220;
--color-orange-600: #D86C0E;
--color-orange-700: #B0560B;
--color-orange-800: #7A3E08;
--color-orange-900: #4F2705;
/* Neutrals */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FAFBFC;
--color-neutral-100: #F2F4F7;
--color-neutral-200: #E4E8EE;
--color-neutral-300: #CBD2DB;
--color-neutral-400: #9AA4B2;
--color-neutral-500: #6B7785;
--color-neutral-600: #4D5764;
--color-neutral-700: #353C46;
--color-neutral-800: #1F242B;
--color-neutral-900: #0D1116;
/* Semantic */
--color-success-50: #ECFDF3;
--color-success-500: #16A34A;
--color-success-600: #15803D;
--color-info-50: #EFF6FF;
--color-info-500: #2563EB;
--color-info-600: #1D4ED8;
--color-warning-50: #FFF7E6;
--color-warning-500: #F59300;
--color-warning-600: #B45309;
--color-error-50: #FEF2F2;
--color-error-500: #DC2626;
--color-error-600: #B91C1C;
/* Alias semantiques */
--color-brand: var(--color-slate-700);
--color-brand-strong: var(--color-slate-900);
--color-brand-soft: var(--color-slate-50);
--color-accent: var(--color-orange-500);
--color-accent-hover: var(--color-orange-600);
--color-accent-pressed: var(--color-orange-700);
--color-accent-soft: var(--color-orange-50);
--color-accent-on-light: var(--color-orange-600);
--color-bg: var(--color-neutral-0);
--color-bg-subtle: var(--color-neutral-50);
--color-bg-muted: var(--color-neutral-100);
--color-bg-inverse: var(--color-slate-800);
--color-bg-brand: var(--color-slate-700);
--color-fg: var(--color-slate-800);
--color-fg-muted: var(--color-slate-500);
--color-fg-subtle: var(--color-slate-400);
--color-fg-disabled: var(--color-neutral-400);
--color-fg-inverse: var(--color-neutral-0);
--color-fg-on-accent: var(--color-neutral-0);
--color-fg-on-brand: var(--color-neutral-0);
--color-border: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-focus: var(--color-orange-500);
--color-border-inverse: var(--color-slate-600);
--color-success: var(--color-success-600);
--color-info: var(--color-info-600);
--color-warning: var(--color-warning-600);
--color-error: var(--color-error-600);
/* Typo */
--font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extra: 800;
--fs-caption: 0.75rem;
--fs-small: 0.875rem;
--fs-body: 1rem;
--fs-body-lg: 1.125rem;
--fs-h6: 1rem;
--fs-h5: 1.125rem;
--fs-h4: 1.375rem;
--fs-h3: 1.75rem;
--fs-h2: 2.25rem;
--fs-h1: 3rem;
--fs-display: 4rem;
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
--ls-tight: -0.02em;
--ls-snug: -0.01em;
--ls-normal: 0;
--ls-wide: 0.02em;
--ls-wider: 0.08em;
/* Spacing */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
/* Radii */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* Shadows */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
--shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
/* Focus ring orange 35% */
--ring-focus: 0 0 0 3px rgba(245, 130, 32, 0.35);
/* Layout */
--container-max: 1280px;
--grid-gutter: var(--space-5);
/* Breakpoints (reference) */
--bp-sm: 640px;
--bp-md: 1024px;
--bp-lg: 1440px;
/* Motion (v1.1 : ajouts durée-slow long ; v1.2 : ease-draw + durées stroke-draw) */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
--dur-x-slow: 600ms;
--dur-draw: 800ms;
--dur-draw-long: 1000ms;
/* Swoosh doctrine v1.2 — décor / conteneur / CTA shape */
--swoosh-decor-orange: var(--color-orange-100);
--swoosh-decor-orange-alt: var(--color-orange-200);
--swoosh-decor-slate: var(--color-slate-100);
--swoosh-decor-slate-alt: var(--color-slate-200);
--swoosh-fill-strong-orange: var(--color-orange-500);
--swoosh-fill-strong-slate: var(--color-slate-900);
--swoosh-text-on-strong: #FFFFFF;
--swoosh-text-on-strong-alt: var(--color-orange-200);
/* Timeline verticale alternée v1.2 */
--timeline-line-color: var(--color-slate-200);
--timeline-line-color-active: var(--color-orange-500);
--timeline-bullet-size: 64px;
--timeline-bullet-size-lg: 72px;
--timeline-stagger-delay: 100ms;
}
/* =========================================================================
2. RESET + BASE
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: var(--color-fg);
background: var(--color-bg);
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-on-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-accent-pressed); }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Headings */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--color-fg);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-snug);
margin: 0;
font-variation-settings: "opsz" 36;
font-optical-sizing: auto;
}
h5, h6 { font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-fg-muted); }
p { margin: 0; line-height: var(--lh-relaxed); }
p.lead { font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--color-fg-muted); }
small, .text-small { font-size: var(--fs-small); line-height: var(--lh-normal); }
.text-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--color-fg-muted); }
/* Skip link a11y */
.skip-link {
position: absolute; left: -10000px; top: 8px;
background: var(--color-slate-900); color: #fff;
padding: 12px 18px; border-radius: var(--radius-md);
font-weight: 600; text-decoration: none;
z-index: 1000;
}
.skip-link:focus { left: 8px; color: #fff; }
/* Focus global, brand orange */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: none;
box-shadow: var(--ring-focus);
border-radius: var(--radius-sm);
}
/* Container */
.njs-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }
@media (min-width: 1024px) { .njs-container { padding: 0 var(--space-6); } }
/* Section rhythm */
.njs-section { padding: var(--space-7) 0; }
@media (min-width: 1024px) { .njs-section { padding: var(--space-9) 0; } }
.njs-section--slate { background: var(--color-slate-700); color: var(--color-fg-inverse); }
.njs-section--slate h1, .njs-section--slate h2, .njs-section--slate h3 { color: #fff; }
.njs-section--slate p { color: rgba(255,255,255,0.78); }
.njs-section--soft { background: var(--color-bg-subtle); }
/* =========================================================================
3. EYEBROW + EMPHASIS canonique
========================================================================= */
.njs-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent-on-light);
}
.njs-eyebrow-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent); }
/* Pattern d'emphase canonique, version inline simple (SVG en background) */
.njs-emph {
position: relative;
display: inline-block;
font-style: italic;
font-weight: 500;
color: var(--color-accent-on-light);
}
/* v1.2.3 — underline swoosh retiré (passait sous les descendantes, fragile typographiquement).
L'emphase est désormais portée par italique + couleur orange uniquement, plus sobre et corporate. */
.njs-emph::after { content: none; }
/* Emphase animee, trait dessine au reveal (signature NJS) */
.njs-emph--animated::after {
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-x-slow) var(--ease-out);
}
.reveal.in .njs-emph--animated::after { transform: scaleX(1); }
/* =========================================================================
4. HEADER + NAV (v1.1, sticky + glass au scroll, dropdowns)
========================================================================= */
.njs-header {
position: sticky; top: 0; z-index: 100;
background: #fff;
border-bottom: 1px solid var(--color-border);
transition: background var(--dur-slow) var(--ease-out), backdrop-filter var(--dur-slow) var(--ease-out);
}
.njs-header.scrolled {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.njs-header-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 16px var(--space-5);
display: flex; align-items: center; gap: var(--space-6);
}
@media (min-width: 1024px) { .njs-header-inner { padding: 16px var(--space-6); } }
.njs-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.njs-brand img { height: 38px; width: auto; display: block; }
@media (min-width: 1024px) { .njs-brand img { height: 44px; } }
/* Nav desktop */
.njs-nav { display: none; align-items: center; gap: 4px; flex: 1; justify-content: flex-end; margin-right: var(--space-5); }
@media (min-width: 1024px) { .njs-nav { display: flex; } }
.njs-nav-item { position: relative; }
.njs-nav-link {
display: inline-flex; align-items: center; gap: 4px;
padding: 10px 14px;
font-size: 14.5px;
font-weight: 500;
color: var(--color-slate-700);
text-decoration: none;
border-radius: 6px;
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
white-space: nowrap;
}
.njs-nav-link:hover { color: var(--color-fg); background: var(--color-bg-subtle); }
.njs-nav-link.active { color: var(--color-accent-on-light); }
.njs-nav-caret { width: 14px; height: 14px; opacity: 0.5; }
.njs-nav-drop {
position: absolute; top: 100%; left: 0;
min-width: 240px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 8px;
margin-top: 6px;
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.njs-nav-item:hover .njs-nav-drop,
.njs-nav-item:focus-within .njs-nav-drop {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.njs-nav-drop-item {
display: block;
padding: 10px 12px;
font-size: 14px;
color: var(--color-fg);
text-decoration: none;
border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease-out);
}
.njs-nav-drop-item:hover { background: var(--color-bg-subtle); color: var(--color-accent-on-light); }
.njs-header-cta { display: none; align-items: center; gap: 12px; }
@media (min-width: 1024px) { .njs-header-cta { display: inline-flex; } }
.njs-link-quiet { font-size: 14px; font-weight: 500; color: var(--color-slate-700); text-decoration: none; padding: 8px 4px; }
.njs-link-quiet:hover { color: var(--color-accent-on-light); }
/* Burger mobile */
.njs-burger {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-left: auto;
}
@media (min-width: 1024px) { .njs-burger { display: none; } }
.njs-burger span {
width: 18px; height: 2px;
background: var(--color-fg);
display: block;
position: relative;
}
.njs-burger span::before, .njs-burger span::after {
content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-fg);
}
.njs-burger span::before { top: -6px; }
.njs-burger span::after { top: 6px; }
/* Mobile drawer */
.njs-drawer {
position: fixed; inset: 0;
background: rgba(19, 28, 37, 0.7);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-slow) var(--ease-out);
}
.njs-drawer.open { opacity: 1; pointer-events: auto; }
.njs-drawer-panel {
position: absolute; right: 0; top: 0; bottom: 0;
width: min(360px, 88vw);
background: #fff;
padding: 24px;
overflow-y: auto;
transform: translateX(100%);
transition: transform var(--dur-slow) var(--ease-out);
display: flex; flex-direction: column; gap: 8px;
}
.njs-drawer.open .njs-drawer-panel { transform: translateX(0); }
.njs-drawer-close {
align-self: flex-end;
width: 40px; height: 40px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 20px;
margin-bottom: 12px;
}
.njs-drawer a {
display: block;
padding: 12px 8px;
font-size: 16px;
font-weight: 500;
color: var(--color-fg);
text-decoration: none;
border-bottom: 1px solid var(--color-border);
}
.njs-drawer a.is-cta {
margin-top: 16px;
background: var(--color-accent);
color: #fff;
border-radius: var(--radius-md);
text-align: center;
border-bottom: 0;
}
/* =========================================================================
5. BUTTONS
========================================================================= */
.njs-btn {
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
line-height: 1;
padding: 12px 22px;
border-radius: var(--radius-md);
border: 1px solid transparent;
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none;
transition: background var(--dur-base) var(--ease-out), color var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
cursor: pointer;
white-space: nowrap;
}
.njs-btn:focus-visible { box-shadow: var(--ring-focus); }
.njs-btn--sm { padding: 8px 14px; font-size: 13.5px; }
.njs-btn--lg { padding: 14px 26px; font-size: 16px; }
.njs-btn--primary { background: var(--color-accent); color: #fff; }
.njs-btn--primary:hover { background: var(--color-accent-hover); color: #fff; }
.njs-btn--primary:active { background: var(--color-accent-pressed); }
.njs-btn--secondary { background: #fff; color: var(--color-slate-800); border-color: var(--color-slate-200); }
.njs-btn--secondary:hover { background: var(--color-bg-subtle); border-color: var(--color-slate-300); color: var(--color-slate-800); }
.njs-btn--tertiary { background: var(--color-slate-700); color: #fff; }
.njs-btn--tertiary:hover { background: var(--color-slate-800); color: #fff; }
.njs-btn--ghost { background: transparent; color: var(--color-accent-on-light); padding-inline: 12px; }
.njs-btn--ghost:hover { background: var(--color-accent-soft); color: var(--color-accent-pressed); }
.njs-btn--inverse { background: #fff; color: var(--color-slate-800); }
.njs-btn--inverse:hover { background: var(--color-bg-subtle); color: var(--color-slate-900); }
.njs-link-arrow {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600;
color: var(--color-accent-on-light);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base);
}
.njs-link-arrow:hover { color: var(--color-accent-pressed); border-bottom-color: var(--color-accent); }
/* =========================================================================
6. SWOOSHS PARALLAX (signature NJS, v1.1)
========================================================================= */
.njs-swoosh-layer {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.njs-swoosh {
position: absolute;
width: 900px; height: auto;
opacity: 0.55;
will-change: transform;
}
.njs-swoosh--01 { top: -120px; right: -240px; }
.njs-swoosh--02 { bottom: -160px; left: -260px; transform: rotate(180deg); opacity: 0.4; }
.njs-swoosh--03 { top: 30%; right: -300px; opacity: 0.3; }
@media (max-width: 768px) {
.njs-swoosh { width: 500px; opacity: 0.3; }
.njs-swoosh--01 { top: -60px; right: -180px; }
.njs-swoosh--02, .njs-swoosh--03 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.njs-swoosh { transform: none !important; }
}
/* =========================================================================
7. HERO PRINCIPAL (home) avec DIAPORAMA secteurs (v1.1)
========================================================================= */
/* v1.2.4 — hero strictement viewport : padding réduit, contenu adapté pour tenir dans 100vh */
.njs-hero {
position: relative;
background: #fff;
padding: 24px 0 16px;
overflow: hidden;
min-height: calc(100vh - 84px);
display: flex;
align-items: center;
}
@media (min-width: 1024px) {
.njs-hero {
padding: 32px 0 24px;
min-height: calc(100vh - 96px);
}
}
.njs-hero > .njs-hero-grid { width: 100%; }
.njs-hero-grid {
position: relative; z-index: 2;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-5);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
align-items: start; /* v1.2.3 — top-aligné : le diaporama démarre au niveau du logo hero */
}
@media (min-width: 1024px) {
.njs-hero-grid {
grid-template-columns: 1.05fr 0.95fr;
gap: 72px;
padding: 0 var(--space-6);
}
}
/* v1.2.4 — gap réduit pour aider le hero à tenir dans 100vh */
.njs-hero-content { display: flex; flex-direction: column; gap: 18px; }
/* v1.2.4 — H1 réduit (était clamp 36-56 lh 1.32) pour rentrer dans viewport */
.njs-hero-title {
font-family: var(--font-display);
font-size: clamp(30px, 4.5vw, 44px);
line-height: 1.22;
letter-spacing: -0.02em;
font-weight: 600;
color: var(--color-slate-900);
margin: 0;
font-variation-settings: "opsz" 48;
font-optical-sizing: auto;
}
.njs-hero-title strong { font-weight: 600; }
.njs-hero-lead {
font-family: var(--font-body);
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.6;
color: var(--color-slate-500);
max-width: 560px;
margin: 0;
}
.njs-hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.njs-hero-checks {
display: flex; flex-wrap: wrap; gap: 18px;
margin-top: 4px;
}
.njs-hero-checks > span {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px;
color: var(--color-slate-600);
font-weight: 500;
}
.njs-hero-checks svg { color: var(--color-success); flex-shrink: 0; }
/* Diaporama media right column — v1.2.5 : agrandi (le H1 réduit libère de la place) */
.njs-hero-media {
position: relative;
height: clamp(440px, 68vh, 640px);
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--color-slate-700);
box-shadow: var(--shadow-lg);
}
.njs-slideshow { position: absolute; inset: 0; }
.njs-slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity var(--dur-x-slow) var(--ease-out);
}
.njs-slide.is-active { opacity: 1; }
.njs-slide img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* v2.1 — scrim allégé (0.85/0.35/0.15 → 0.55/0.20/0.00) pour rendre les visuels plus attrayants */
.njs-slide-scrim {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(19, 28, 37, 0.55) 0%, rgba(19, 28, 37, 0.20) 55%, rgba(19, 28, 37, 0.00) 100%);
}
/* v1.2.3 — fix lisibilité : contenu remonté de 32 → 88 px pour libérer la zone des contrôles en bas */
/* v2.1 — encart slate localisé sous le bloc texte pour garantir AA après allègement du scrim (visuels clairs) */
.njs-slide-content {
position: absolute;
left: var(--space-5); right: var(--space-5); bottom: 88px;
color: #fff;
max-width: 400px;
padding: 16px 20px;
background: linear-gradient(180deg, rgba(15, 23, 32, 0.30) 0%, rgba(15, 23, 32, 0.80) 100%);
border-radius: 14px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.njs-slide-content .njs-eyebrow { color: var(--color-orange-200); }
.njs-slide-content h2 {
font-size: clamp(20px, 2.3vw, 28px);
color: #fff;
margin-top: 8px;
line-height: 1.2;
}
.njs-slide-content p {
font-size: 14px;
color: rgba(255,255,255,0.85);
margin-top: 8px;
line-height: 1.55;
}
.njs-slide-arrows {
position: absolute;
left: var(--space-5); bottom: var(--space-5);
display: flex; gap: 8px;
z-index: 4;
}
.njs-slide-arrow {
width: 40px; height: 40px;
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.4);
background: rgba(19, 28, 37, 0.35);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.njs-slide-arrow:hover { background: rgba(19, 28, 37, 0.6); border-color: rgba(255, 255, 255, 0.7); }
/* v1.2.3 — dots déplacés en bas-droite (au lieu de centré) pour ne plus chevaucher le texte slide-content */
.njs-slide-dots {
position: absolute;
bottom: 32px; right: var(--space-5);
display: flex; gap: 8px;
z-index: 4;
}
.njs-slide-dot {
width: 8px; height: 8px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.4);
border: 0;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast);
}
.njs-slide-dot.is-active { background: #fff; width: 22px; }
@media (max-width: 768px) {
.njs-slide-content { left: 16px; right: 16px; bottom: 64px; }
.njs-slide-dots { bottom: 16px; }
.njs-slide-arrows { left: 16px; bottom: 12px; }
}
/* =========================================================================
8. HERO SECONDAIRE (pages internes, compact, full-width avec scrim slate, v1.1)
========================================================================= */
.njs-hero-compact {
position: relative;
padding: 64px 0 48px;
background: var(--color-slate-700);
color: #fff;
overflow: hidden;
}
.njs-hero-compact h1 {
color: #fff;
font-size: clamp(28px, 4.5vw, 44px);
line-height: 1.2;
margin: 8px 0 16px;
font-variation-settings: "opsz" 48;
}
.njs-hero-compact .njs-eyebrow { color: var(--color-orange-200); }
.njs-hero-compact-lead {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
max-width: 720px;
margin: 0;
}
.njs-hero-compact-bg {
position: absolute; inset: 0;
z-index: 0; opacity: 0.4;
}
.njs-hero-compact-bg img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
.njs-hero-compact-bg::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(19,28,37,0.85) 0%, rgba(19,28,37,0.55) 100%);
}
.njs-hero-compact .njs-container { position: relative; z-index: 2; }
.njs-hero-compact-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
/* =========================================================================
9. BREADCRUMB (v1.1)
========================================================================= */
.njs-breadcrumb {
font-size: 13px;
color: var(--color-fg-muted);
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.njs-breadcrumb a { color: inherit; text-decoration: none; }
.njs-breadcrumb a:hover { color: var(--color-accent-on-light); }
.njs-breadcrumb-sep { color: var(--color-fg-subtle); }
.njs-breadcrumb-current { color: var(--color-fg); font-weight: 500; }
.njs-hero-compact .njs-breadcrumb,
.njs-hero-compact .njs-breadcrumb a,
.njs-hero-compact .njs-breadcrumb-current { color: rgba(255,255,255,0.7); }
.njs-hero-compact .njs-breadcrumb-current { color: #fff; }
.njs-hero-compact .njs-breadcrumb a:hover { color: var(--color-orange-200); }
/* =========================================================================
10. CARDS et grilles communes (v1.1)
========================================================================= */
.njs-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
display: flex; flex-direction: column; gap: 12px;
height: 100%;
}
.njs-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* v1.2.2 — pictos : fond orange vif (orange-500) + icône blanche pour ancrer la marque */
.njs-card-icon {
width: 48px; height: 48px;
border-radius: var(--radius-md);
background: var(--color-accent); /* orange-500 plein */
color: #fff; /* icône en blanc */
display: inline-flex; align-items: center; justify-content: center;
}
.njs-card h3 { font-size: var(--fs-h4); margin: 8px 0 4px; }
.njs-card p { color: var(--color-fg-muted); font-size: 15px; }
.njs-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.njs-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.njs-grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) {
.njs-grid-2 { grid-template-columns: 1fr 1fr; }
.njs-grid-3 { grid-template-columns: 1fr 1fr; }
.njs-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.njs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.njs-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Bloc Pour qui (6 personas) */
.njs-grid-personas { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) { .njs-grid-personas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .njs-grid-personas { grid-template-columns: repeat(3, 1fr); } }
.njs-persona-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-xs);
display: flex; flex-direction: column; gap: 12px;
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
height: 100%;
}
.njs-persona-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* v1.2.2 — picto persona : fond orange vif (orange-500) + icône blanche */
.njs-persona-icon {
width: 56px; height: 56px;
border-radius: var(--radius-lg);
background: var(--color-accent);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.njs-persona-card h3 { font-size: 1.25rem; }
.njs-persona-card ul { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.njs-persona-card li {
position: relative; padding-left: 22px;
font-size: 14.5px; color: var(--color-fg-muted); line-height: 1.55;
}
.njs-persona-card li::before {
content: ''; position: absolute; left: 4px; top: 8px;
width: 8px; height: 8px; border-radius: var(--radius-full);
background: var(--color-accent);
}
/* =========================================================================
11. METHODE (timeline numerotee, v1.1)
========================================================================= */
.njs-timeline {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
counter-reset: njs-step;
}
@media (min-width: 1024px) {
.njs-timeline { grid-template-columns: repeat(5, 1fr); }
}
.njs-timeline-step {
counter-increment: njs-step;
position: relative;
padding-top: 56px;
}
.njs-timeline-step::before {
content: counter(njs-step, decimal-leading-zero);
position: absolute; top: 0; left: 0;
width: 44px; height: 44px;
border-radius: var(--radius-full);
background: var(--color-accent);
color: #fff;
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.njs-timeline-step h3 { font-size: 1.25rem; margin-bottom: 8px; }
.njs-timeline-step p { color: var(--color-fg-muted); font-size: 15px; }
.njs-timeline-step small { display: block; margin-top: 8px; color: var(--color-fg-subtle); font-size: 13px; }
/* =========================================================================
12. BANDEAU CTA mid-page (slate-900, v1.1)
========================================================================= */
.njs-cta-band {
background: var(--color-slate-900);
color: #fff;
padding: var(--space-7) 0;
border-radius: var(--radius-xl);
text-align: center;
position: relative;
overflow: hidden;
}
.njs-cta-band h2 { color: #fff; font-size: clamp(24px, 3.5vw, 36px); }
.njs-cta-band p { color: rgba(255, 255, 255, 0.78); margin: 12px auto 0; max-width: 600px; }
.njs-cta-band .njs-cta-row { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
/* =========================================================================
13. BLOC FILIALE Network Interim (v1.1)
========================================================================= */
.njs-parent-band {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: center;
}
@media (min-width: 1024px) { .njs-parent-band { grid-template-columns: 1fr 2fr; padding: var(--space-7); } }
.njs-parent-band-logo {
display: inline-flex; align-items: center; justify-content: center;
width: 100%; height: 96px;
background: var(--color-bg-subtle);
border-radius: var(--radius-lg);
color: var(--color-slate-600);
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: 0.05em;
}
.njs-parent-band h3 { font-size: 1.5rem; }
.njs-parent-band p { color: var(--color-fg-muted); margin-top: 8px; }
/* =========================================================================
14. STATS / chiffres-cles (placeholders explicites, v1.1)
========================================================================= */
.njs-stats {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 640px) { .njs-stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .njs-stats { grid-template-columns: repeat(4, 1fr); } }
.njs-stat {
background: var(--color-bg-subtle);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.njs-stat-num {
font-family: var(--font-display);
font-size: 2.25rem;
font-weight: 600;
color: var(--color-accent-on-light);
line-height: 1;
font-variation-settings: "opsz" 36;
}
.njs-stat-label { font-size: 14px; color: var(--color-fg-muted); margin-top: 4px; line-height: 1.4; }
/* =========================================================================
15. TEMOIGNAGES (placeholders explicites, v1.1)
========================================================================= */
.njs-quote-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex; flex-direction: column; gap: 16px;
box-shadow: var(--shadow-xs);
height: 100%;
}
.njs-quote-card blockquote {
margin: 0;
font-family: var(--font-display);
font-size: 1.125rem;
line-height: 1.55;
color: var(--color-fg);
font-style: italic;
font-weight: 500;
}
.njs-quote-card blockquote::before { content: '« '; color: var(--color-accent); }
.njs-quote-card blockquote::after { content: ' »'; color: var(--color-accent); }
.njs-quote-author {
display: flex; align-items: center; gap: 12px;
border-top: 1px solid var(--color-border);
padding-top: 16px;
margin-top: auto;
}
.njs-quote-avatar {
width: 44px; height: 44px;
border-radius: var(--radius-full);
background: var(--color-bg-muted);
color: var(--color-fg-muted);
font-weight: 600;
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.njs-quote-name { font-size: 14px; font-weight: 600; color: var(--color-fg); }
.njs-quote-role { font-size: 13px; color: var(--color-fg-muted); }
.njs-quote-placeholder {
background: var(--color-bg-subtle);
border: 1px dashed var(--color-border-strong);
color: var(--color-fg-muted);
padding: var(--space-6);
border-radius: var(--radius-lg);
text-align: center;
font-size: 14px;
font-style: italic;
}
/* =========================================================================
16. PRESTATIONS (carte detaillee + side-nav sticky, v1.1)
========================================================================= */
.njs-prestation-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex; flex-direction: column; gap: 12px;
height: 100%;
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base);
}
.njs-prestation-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.njs-prestation-card .njs-card-icon { background: var(--color-accent); color: #fff; }
.njs-prestation-card h3 { font-size: var(--fs-h4); }
.njs-prestation-card ul { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.njs-prestation-card li {
position: relative;
padding-left: 26px;
font-size: 14.5px;
color: var(--color-fg-muted);
line-height: 1.5;
}
.njs-prestation-card li::before {
content: ''; position: absolute; left: 0; top: 6px;
width: 16px; height: 16px;
border-radius: var(--radius-full);
background: var(--color-success-50);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
background-position: center;
background-repeat: no-repeat;
}
/* Page Prestation detail layout : side-nav sticky + corps */
.njs-prestation-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
}
@media (min-width: 1024px) {
.njs-prestation-layout { grid-template-columns: 240px 1fr; gap: var(--space-8); }
}
.njs-sidenav {
display: flex; flex-direction: column;
gap: 4px;
position: sticky; top: 96px;
align-self: start;
}
.njs-sidenav a {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: 14px;
color: var(--color-fg-muted);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast);
border-left: 3px solid transparent;
}
.njs-sidenav a:hover { background: var(--color-bg-subtle); color: var(--color-fg); }
.njs-sidenav a.active {
background: var(--color-accent-soft);
color: var(--color-accent-on-light);
border-left-color: var(--color-accent);
font-weight: 600;
}
/* Bloc Inclus / Non inclus deux colonnes */
.njs-inclus-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .njs-inclus-grid { grid-template-columns: 1fr 1fr; } }
.njs-inclus-col {
background: var(--color-bg-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.njs-inclus-col h4 { font-family: var(--font-body); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 12px; }
.njs-inclus-col--yes h4 { color: var(--color-success); }
.njs-inclus-col--no h4 { color: var(--color-error); }
.njs-inclus-col ul { display: flex; flex-direction: column; gap: 8px; }
.njs-inclus-col li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--color-fg); line-height: 1.5; }
.njs-inclus-col--yes li::before {
content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-success); font-weight: 700;
}
.njs-inclus-col--no li::before {
content: '×'; position: absolute; left: 0; top: -2px; color: var(--color-error); font-weight: 700; font-size: 18px;
}
/* Comment ca marche, etapes numerotees compact (4 etapes) */
.njs-steps {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
counter-reset: njs-step-mini;
}
@media (min-width: 768px) { .njs-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .njs-steps { grid-template-columns: repeat(4, 1fr); } }
.njs-step-mini {
counter-increment: njs-step-mini;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex; flex-direction: column; gap: 8px;
}
.njs-step-mini::before {
content: counter(njs-step-mini, decimal-leading-zero);
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--color-accent);
line-height: 1;
}
.njs-step-mini h4 { font-size: 16px; }
.njs-step-mini p { color: var(--color-fg-muted); font-size: 14px; }
/* =========================================================================
17. TARIFS / pricing cards (3 colonnes, v1.1)
========================================================================= */
.njs-pricing-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
align-items: stretch;
}
@media (min-width: 768px) { .njs-pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .njs-pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.njs-price-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-7);
display: flex; flex-direction: column; gap: 16px;
position: relative;
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
box-shadow: var(--shadow-sm);
height: 100%;
}
.njs-price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.njs-price-card--feature {
border: 2px solid var(--color-accent);
background: linear-gradient(180deg, #fff 0%, var(--color-orange-50) 200%);
box-shadow: var(--shadow-lg);
}
.njs-price-badge {
position: absolute;
top: -14px; left: 24px;
background: var(--color-accent);
color: #fff;
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: 12px; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase;
}
.njs-price-card h3 { font-size: 1.5rem; margin: 0; }
.njs-price-card .njs-price-tagline { color: var(--color-fg-muted); font-size: 14px; margin-bottom: 4px; }
.njs-price-amount {
font-family: var(--font-display);
font-size: 2.25rem; font-weight: 600;
color: var(--color-fg);
line-height: 1;
margin: 8px 0;
font-variation-settings: "opsz" 36;
}
.njs-price-amount small { font-size: 14px; font-weight: 500; color: var(--color-fg-muted); display: block; margin-top: 6px; line-height: 1.4; }
.njs-price-features { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; flex-grow: 1; }
.njs-price-features li {
position: relative; padding-left: 26px;
font-size: 14.5px; color: var(--color-fg); line-height: 1.5;
}
.njs-price-features li::before {
content: ''; position: absolute; left: 0; top: 5px;
width: 18px; height: 18px;
background: var(--color-success-50);
border-radius: var(--radius-full);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
background-position: center;
background-repeat: no-repeat;
}
.njs-price-cta { margin-top: 16px; }
/* Table comparative responsive */
.njs-compare-wrap { overflow-x: auto; }
.njs-compare {
width: 100%; min-width: 720px;
border-collapse: collapse;
font-size: 14.5px;
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border);
}
.njs-compare th, .njs-compare td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.njs-compare thead th {
background: var(--color-slate-700);
color: #fff;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
}
.njs-compare tbody th { background: var(--color-bg-subtle); font-weight: 600; color: var(--color-fg); }
.njs-compare tr:last-child td, .njs-compare tr:last-child th { border-bottom: 0; }
.njs-compare .check { color: var(--color-success); font-weight: 700; }
.njs-compare .cross { color: var(--color-fg-subtle); }
/* =========================================================================
18. FAQ accordeon (v1.1)
========================================================================= */
.njs-faq { display: flex; flex-direction: column; gap: 12px; }
.njs-faq-item {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--dur-base) var(--ease-out);
}
.njs-faq-item.open { border-color: var(--color-accent); }
.njs-faq-trigger {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 20px;
background: transparent;
border: 0;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
color: var(--color-fg);
text-align: left;
cursor: pointer;
}
.njs-faq-trigger:hover { color: var(--color-accent-on-light); }
.njs-faq-icon {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: var(--radius-full);
background: var(--color-bg-subtle);
color: var(--color-fg-muted);
display: inline-flex; align-items: center; justify-content: center;
position: relative;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.njs-faq-icon::before, .njs-faq-icon::after {
content: ''; position: absolute;
background: currentColor;
}
.njs-faq-icon::before { width: 12px; height: 2px; }
.njs-faq-icon::after { width: 2px; height: 12px; transition: transform var(--dur-base) var(--ease-out); }
.njs-faq-item.open .njs-faq-icon { background: var(--color-accent); color: #fff; }
.njs-faq-item.open .njs-faq-icon::after { transform: rotate(90deg); }
.njs-faq-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.njs-faq-item.open .njs-faq-content { grid-template-rows: 1fr; }
.njs-faq-content > div { overflow: hidden; }
.njs-faq-content p {
padding: 0 20px 18px;
font-size: 15px;
line-height: 1.65;
color: var(--color-fg-muted);
}
.njs-faq-content p a { color: var(--color-accent-on-light); }
/* Filtre pills FAQ */
.njs-faq-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.njs-faq-filter {
padding: 8px 14px;
font-size: 13.5px;
font-weight: 600;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: #fff;
color: var(--color-fg-muted);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), border-color var(--dur-fast);
}
.njs-faq-filter:hover { color: var(--color-fg); }
.njs-faq-filter.active {
background: var(--color-slate-700);
color: #fff;
border-color: var(--color-slate-700);
}
/* =========================================================================
19. FORM (Contact, v1.1)
========================================================================= */
.njs-form { display: flex; flex-direction: column; gap: 16px; }
.njs-field { display: flex; flex-direction: column; gap: 6px; }
.njs-field label { font-size: 14px; font-weight: 600; color: var(--color-fg); }
.njs-field .njs-hint { font-size: 13px; color: var(--color-fg-muted); }
.njs-field input[type="text"],
.njs-field input[type="email"],
.njs-field input[type="tel"],
.njs-field select,
.njs-field textarea {
width: 100%;
font-family: var(--font-body);
font-size: 15px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-fg);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.njs-field textarea { resize: vertical; min-height: 140px; }
.njs-field input:focus,
.njs-field select:focus,
.njs-field textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--ring-focus);
}
.njs-field input[aria-invalid="true"],
.njs-field select[aria-invalid="true"],
.njs-field textarea[aria-invalid="true"] {
border-color: var(--color-error);
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.njs-error-msg { font-size: 13px; color: var(--color-error); }
.njs-row-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .njs-row-2 { grid-template-columns: 1fr 1fr; } }
.njs-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.njs-checkbox-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 12px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 13.5px;
font-weight: 500;
color: var(--color-fg);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.njs-checkbox-pill input { accent-color: var(--color-accent); }
.njs-checkbox-pill:hover { background: var(--color-bg-subtle); }
.njs-checkbox-pill:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.njs-rgpd {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13.5px;
color: var(--color-fg-muted);
line-height: 1.5;
}
.njs-rgpd input { margin-top: 3px; accent-color: var(--color-accent); }
.njs-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.njs-form .njs-btn--lg { padding: 14px 28px; }
.njs-form-success {
background: var(--color-success-50);
border: 1px solid var(--color-success);
border-radius: var(--radius-md);
color: var(--color-success);
padding: 14px 18px;
font-size: 14px;
font-weight: 600;
}
/* Notification toast (success post envoi) */
.njs-toast {
position: fixed;
bottom: 24px; right: 24px;
background: var(--color-slate-900);
color: #fff;
padding: 14px 20px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
display: flex; align-items: center; gap: 12px;
font-size: 14px;
z-index: 300;
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.njs-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.njs-toast-icon {
width: 24px; height: 24px; border-radius: var(--radius-full);
background: var(--color-success); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
}
/* Loading spinner sur bouton */
.njs-btn.is-loading { position: relative; pointer-events: none; opacity: 0.8; }
.njs-btn.is-loading::after {
content: '';
width: 16px; height: 16px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: var(--radius-full);
animation: njs-spin 0.8s linear infinite;
}
@keyframes njs-spin { to { transform: rotate(360deg); } }
/* =========================================================================
20. CONTACT info card + map placeholder (v1.1)
========================================================================= */
.njs-contact-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-7);
}
@media (min-width: 1024px) { .njs-contact-grid { grid-template-columns: 5fr 4fr; gap: var(--space-8); } }
.njs-contact-info {
display: flex; flex-direction: column; gap: 16px;
}
.njs-contact-row {
display: flex; align-items: flex-start; gap: 14px;
background: var(--color-bg-subtle);
border-radius: var(--radius-lg);
padding: 16px 18px;
}
/* v1.2.3 — picto contact : sélecteur plus spécifique pour battre la cascade
.njs-contact-row span (qui force color slate-500 et display block sur tous les spans du row,
y compris .njs-contact-icon). On utilise .njs-contact-row .njs-contact-icon pour gagner. */
.njs-contact-row .njs-contact-icon {
width: 40px; height: 40px;
border-radius: var(--radius-md);
background: var(--color-accent);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.njs-contact-row strong { display: block; color: var(--color-fg); font-size: 14.5px; }
.njs-contact-row span, .njs-contact-row a { display: block; color: var(--color-fg-muted); font-size: 14px; line-height: 1.45; text-decoration: none; }
.njs-contact-row a:hover { color: var(--color-accent-on-light); }
.njs-map-placeholder {
background: var(--color-bg-subtle);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
height: 240px;
display: flex; align-items: center; justify-content: center;
color: var(--color-fg-muted);
font-size: 13px;
font-style: italic;
margin-top: 16px;
}
/* =========================================================================
21. FOOTER 4 colonnes (v1.1)
========================================================================= */
.njs-footer {
background: var(--color-slate-900);
color: rgba(255, 255, 255, 0.78);
padding: var(--space-9) 0 var(--space-5);
margin-top: var(--space-9);
font-size: 14px;
}
.njs-footer-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-6);
margin-bottom: var(--space-7);
}
@media (min-width: 640px) { .njs-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .njs-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.njs-footer h4 {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-orange-200);
margin-bottom: 16px;
}
.njs-footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.njs-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.njs-footer a:hover { color: var(--color-orange-200); }
.njs-footer-brand .njs-brand { color: #fff; }
.njs-footer-brand img { height: 44px; filter: brightness(0) invert(1); opacity: 0.95; }
.njs-footer-tagline { margin-top: 12px; max-width: 320px; color: rgba(255, 255, 255, 0.6); line-height: 1.55; }
.njs-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 24px;
display: flex; flex-direction: column; gap: 12px;
align-items: center; justify-content: space-between;
text-align: center;
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 768px) { .njs-footer-bottom { flex-direction: row; text-align: left; } }
.njs-footer-legal-links { display: flex; flex-wrap: wrap; gap: 18px; }
/* =========================================================================
22. ANIMATIONS reveal + stagger (v1.1)
========================================================================= */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--dur-x-slow) var(--ease-out), transform var(--dur-x-slow) var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--dur-x-slow) var(--ease-out), transform var(--dur-x-slow) var(--ease-out);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 300ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 360ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}
/* =========================================================================
23. COOKIE BANNER (v1.1)
========================================================================= */
.njs-cookie {
position: fixed;
left: 16px; right: 16px; bottom: 16px;
background: var(--color-slate-900);
color: #fff;
border-radius: var(--radius-lg);
padding: 18px 22px;
display: grid; grid-template-columns: 1fr; gap: 12px;
z-index: 200;
box-shadow: var(--shadow-xl);
font-size: 14px;
line-height: 1.5;
max-width: 720px;
margin: 0 auto;
}
@media (min-width: 768px) { .njs-cookie { grid-template-columns: 1fr auto; align-items: center; } }
.njs-cookie p { margin: 0; color: rgba(255,255,255,0.85); }
.njs-cookie .njs-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.njs-cookie.is-hidden { display: none; }
/* =========================================================================
24. UTILITAIRES
========================================================================= */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-720 { max-width: 720px; }
.max-w-840 { max-width: 840px; }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-6); }
.section-head.is-centered { text-align: center; align-items: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.eyebrow-row { display: inline-flex; align-items: center; gap: 8px; }
/* =========================================================================
25. LOGO AFFIRMÉ V2 — header agrandi, footer agrandi, watermark wordmark
========================================================================= */
/* Header logo override v2.1 : passe au picto compact (logo-njs-picto.png, ratio 1.31:1) */
.njs-brand img { height: 48px; width: auto; }
@media (min-width: 1024px) { .njs-brand img { height: 58px; } }
/* Header alignement vertical avec picto */
.njs-header-inner { padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 1024px) { .njs-header-inner { padding-top: 12px; padding-bottom: 12px; } }
/* v2.1 — logo hero agrandi +20 % (240 → 288 px) pour mieux identifier la marque */
.njs-hero-logo {
width: clamp(220px, 22vw, 288px);
height: auto;
display: block;
margin-bottom: 4px;
}
@media (max-width: 640px) {
.njs-hero-logo { width: clamp(160px, 50vw, 240px); }
}
/* Footer logo agrandi 200px */
.njs-footer-brand img { height: auto; width: 200px; max-width: 100%; filter: brightness(0) invert(1); opacity: 0.95; }
.njs-footer-baseline {
font-family: var(--font-display);
font-style: italic;
font-size: 15px;
color: var(--color-slate-200);
line-height: 1.5;
margin-top: 10px;
max-width: 320px;
}
/* Watermark wordmark N.J.S — décoratif, posé en débordement contrôlé */
.njs-watermark {
position: absolute;
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.04em;
color: var(--color-slate-300);
opacity: 0.07;
pointer-events: none;
user-select: none;
line-height: 1;
font-size: clamp(200px, 26vw, 400px);
white-space: nowrap;
z-index: 0;
font-variation-settings: "opsz" 60;
}
.njs-watermark--br { bottom: -40px; right: -20px; }
.njs-watermark--tl { top: -40px; left: -20px; }
.njs-watermark--tr { top: -30px; right: -10px; font-size: clamp(160px, 20vw, 320px); }
.njs-watermark--bl { bottom: -30px; left: -10px; font-size: clamp(160px, 20vw, 320px); }
.njs-watermark--inverse { color: var(--color-slate-100); opacity: 0.05; }
.njs-watermark--accent { color: var(--color-orange-200); opacity: 0.10; }
@media (max-width: 640px) {
.njs-watermark { font-size: clamp(120px, 30vw, 200px); }
}
/* Section host pour watermark (position relative + overflow hidden) */
.njs-section--watermarked { position: relative; overflow: hidden; }
/* =========================================================================
26. SWOOSH CONTAINER v1.2 — variante B (signature) et CTA shape (variante C)
========================================================================= */
/* v1.2.2 — refonte corporate. On abandonne la forme SVG "baleine" et on passe à un
bandeau rectangulaire à coins arrondis généreux (radius-2xl), avec accent décoratif
discret (mini-swoosh dans un coin) plutôt qu'une forme englobante exotique. */
.njs-swoosh-container {
position: relative;
padding: clamp(48px, 7vw, 88px) clamp(32px, 6vw, 72px);
border-radius: var(--radius-2xl);
overflow: hidden;
isolation: isolate;
margin: 32px 0;
box-shadow: var(--shadow-lg);
}
/* Le shape SVG est conservé pour compat mais désactivé par défaut.
Sa place : un mini-swoosh décoratif dans un coin (pas englobant). */
.njs-swoosh-container__shape {
position: absolute;
inset: auto -40px -40px auto;
width: 240px;
height: 160px;
z-index: 0;
pointer-events: none;
opacity: 0.18;
}
.njs-swoosh-container__shape svg {
width: 100%;
height: 100%;
display: block;
}
.njs-swoosh-container__shape svg path {
transition: stroke-dashoffset var(--dur-draw) var(--ease-draw);
fill: #fff;
}
.njs-swoosh-container__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 18px;
max-width: 760px;
margin: 0 auto;
text-align: center;
color: var(--swoosh-text-on-strong);
}
.njs-swoosh-container__content .njs-eyebrow { color: var(--swoosh-text-on-strong-alt); }
.njs-swoosh-container__content h2 {
color: var(--swoosh-text-on-strong);
font-size: clamp(28px, 4vw, 44px);
line-height: 1.2;
font-variation-settings: "opsz" 48;
}
.njs-swoosh-container__content h2 strong { font-weight: 600; }
.njs-swoosh-container__content p {
color: rgba(255, 255, 255, 0.92);
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.55;
max-width: 620px;
margin: 0 auto;
}
.njs-swoosh-container__content .njs-figure {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(48px, 8vw, 88px);
line-height: 1;
color: var(--swoosh-text-on-strong);
font-variation-settings: "opsz" 60;
margin: 8px 0;
}
.njs-swoosh-container__content .njs-figure-label {
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
color: var(--swoosh-text-on-strong-alt);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.njs-swoosh-container__content .njs-cta-row { justify-content: center; }
/* Variante orange-500 plein — fond du conteneur lui-même (plus de shape SVG englobant) */
.njs-swoosh-container--orange { background: var(--swoosh-fill-strong-orange); }
.njs-swoosh-container--orange .njs-swoosh-container__shape svg path { fill: rgba(255,255,255,0.5); }
/* Variante slate-900 plein */
.njs-swoosh-container--slate { background: var(--swoosh-fill-strong-slate); }
.njs-swoosh-container--slate .njs-swoosh-container__shape svg path { fill: var(--color-orange-500); opacity: 0.4; }
/* Boutons à l'intérieur d'un swoosh container — variantes adaptées au fond */
.njs-swoosh-container--orange .njs-btn--inverse { background: #fff; color: var(--color-orange-700); }
.njs-swoosh-container--orange .njs-btn--inverse:hover { background: rgba(255,255,255,0.9); }
.njs-swoosh-container--orange .njs-btn--ghost-light {
background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.7);
}
.njs-swoosh-container--orange .njs-btn--ghost-light:hover { background: rgba(255,255,255,0.12); }
.njs-swoosh-container--slate .njs-btn--inverse { background: #fff; color: var(--color-slate-900); }
.njs-swoosh-container--slate .njs-btn--inverse:hover { background: rgba(255,255,255,0.9); }
/* Animation tracé du contour (stroke-draw au reveal) */
.njs-swoosh-container .njs-swoosh-container__shape svg path {
stroke: rgba(255,255,255,0);
stroke-width: 0;
}
.njs-swoosh-container--draw .njs-swoosh-container__shape svg path {
fill: transparent;
stroke: var(--swoosh-fill-strong-orange);
stroke-width: 3;
stroke-dasharray: 4000;
stroke-dashoffset: 4000;
}
.njs-swoosh-container--draw.reveal.in .njs-swoosh-container__shape svg path {
stroke-dashoffset: 0;
}
/* Mobile : padding réduit, watermark watermark légèrement réduit */
@media (max-width: 640px) {
.njs-swoosh-container { padding: 40px 20px; }
.njs-swoosh-container__content { gap: 14px; }
}
/* Swoosh CTA shape (variante C) — bouton primaire hero qui épouse la courbe swoosh */
.njs-btn--swoosh {
position: relative;
background: transparent;
color: #fff;
padding: 16px 36px 16px 32px;
font-weight: 700;
z-index: 0;
overflow: visible;
isolation: isolate;
}
.njs-btn--swoosh::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-orange-500);
clip-path: path('M 0 8 C 20 0 60 0 100% 4 L 100% 100% C 80 calc(100% + 4px) 20 calc(100% + 2px) 0 calc(100% - 6px) Z');
z-index: -1;
transition: background var(--dur-base) var(--ease-out);
}
.njs-btn--swoosh:hover { color: #fff; }
.njs-btn--swoosh:hover::before { background: var(--color-orange-600); }
/* Fallback nav : pour navigateurs sans clip-path: path() supportant les unités relatives */
@supports not (clip-path: path('M 0 0 L 100% 0')) {
.njs-btn--swoosh::before { border-radius: 26px 30px 22px 28px / 32px 28px 30px 24px; }
}
/* Badge swoosh-shape (trust signals « Recommandé », etc.) */
.njs-badge-swoosh {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 16px;
background: var(--color-orange-500);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 14px 18px 16px 20px / 16px 14px 18px 16px;
white-space: nowrap;
}
.njs-badge-swoosh--slate { background: var(--color-slate-900); color: #fff; }
/* =========================================================================
27. TIMELINE VERTICALE ALTERNÉE v1.2 — composant signature transversal
========================================================================= */
.njs-vtimeline {
position: relative;
padding: var(--space-6) 0;
counter-reset: vstep;
}
.njs-vtimeline__axis {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
transform: translateX(-50%);
background: var(--timeline-line-color);
z-index: 0;
}
.njs-vtimeline__axis-fill {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0;
background: var(--timeline-line-color-active);
transform-origin: top;
transition: height var(--dur-x-slow) var(--ease-out);
}
.njs-vtimeline__step {
position: relative;
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: 24px;
align-items: center;
margin-bottom: clamp(40px, 6vw, 64px);
counter-increment: vstep;
}
.njs-vtimeline__step:last-child { margin-bottom: 0; }
.njs-vtimeline__bullet {
grid-column: 2;
display: inline-flex; align-items: center; justify-content: center;
width: var(--timeline-bullet-size);
height: var(--timeline-bullet-size);
border-radius: var(--radius-full);
background: #fff;
border: 2px solid var(--timeline-line-color);
color: var(--color-slate-500);
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
margin: 0 auto;
z-index: 2;
position: relative;
transition: transform var(--dur-slow) var(--ease-out), background var(--dur-slow), color var(--dur-slow), border-color var(--dur-slow);
}
@media (min-width: 1024px) {
.njs-vtimeline__bullet { width: var(--timeline-bullet-size-lg); height: var(--timeline-bullet-size-lg); font-size: 26px; }
}
.njs-vtimeline__bullet::before { content: counter(vstep, decimal-leading-zero); }
.njs-vtimeline__card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-xs);
transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow), opacity var(--dur-slow);
position: relative;
z-index: 1;
}
.njs-vtimeline__card h3 { font-size: 1.25rem; margin: 0 0 6px; }
.njs-vtimeline__card p { color: var(--color-fg-muted); font-size: 14.5px; margin: 0; }
.njs-vtimeline__card small { display: block; margin-top: 8px; color: var(--color-fg-subtle); font-size: 13px; }
.njs-vtimeline__step--right .njs-vtimeline__card { grid-column: 3; }
.njs-vtimeline__step--left .njs-vtimeline__card { grid-column: 1; text-align: right; }
/* Reveal step-by-step (piloté par JS IntersectionObserver, classe .is-revealed) */
.njs-vtimeline__step .njs-vtimeline__bullet,
.njs-vtimeline__step .njs-vtimeline__card {
opacity: 0;
}
.njs-vtimeline__step .njs-vtimeline__bullet { transform: scale(0.4); }
.njs-vtimeline__step--right .njs-vtimeline__card { transform: translateX(20px); }
.njs-vtimeline__step--left .njs-vtimeline__card { transform: translateX(-20px); }
.njs-vtimeline__step.is-revealed .njs-vtimeline__bullet {
opacity: 1;
transform: scale(1);
background: var(--color-orange-500);
color: #fff;
border-color: var(--color-orange-500);
}
.njs-vtimeline__step.is-revealed .njs-vtimeline__card {
opacity: 1;
transform: translateX(0);
transition-delay: var(--timeline-stagger-delay);
}
/* Mobile (≤ 640 px) : layout vertical non-alterné, ligne à gauche */
@media (max-width: 640px) {
.njs-vtimeline { padding-left: 8px; }
.njs-vtimeline__axis { left: 32px; }
.njs-vtimeline__step {
grid-template-columns: 64px 1fr;
gap: 16px;
}
.njs-vtimeline__bullet { grid-column: 1; width: 48px; height: 48px; font-size: 18px; }
.njs-vtimeline__step--right .njs-vtimeline__card,
.njs-vtimeline__step--left .njs-vtimeline__card {
grid-column: 2;
text-align: left;
transform: translateX(0);
}
.njs-vtimeline__step.is-revealed .njs-vtimeline__card { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.njs-vtimeline__step .njs-vtimeline__bullet,
.njs-vtimeline__step .njs-vtimeline__card { opacity: 1; transform: none; }
.njs-vtimeline__axis-fill { transition: none; height: 100% !important; }
}
/* =========================================================================
28. ANIMATIONS SIGNATURE v1.2
- Hero swoosh logo qui se trace au load (1000 ms)
- Underline .njs-emph qui se trace au reveal (600 ms, déjà v1.1, conservé)
- Corner-swoosh cards qui se trace au hover (300 ms)
- Parallax rotation légère ±3-5° (en plus de la translation v1.1)
- H2 letter-spacing-pose au reveal (.njs-h2-signature)
========================================================================= */
/* Hero swoosh logo qui se trace au chargement */
.njs-hero-signature-swoosh {
position: absolute;
top: 8%;
left: 50%;
transform: translateX(-50%);
width: clamp(260px, 32vw, 480px);
height: auto;
pointer-events: none;
z-index: 1;
opacity: 0.55;
}
.njs-hero-signature-swoosh path {
fill: none;
stroke: var(--color-orange-500);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 1800;
stroke-dashoffset: 1800;
animation: njs-stroke-draw var(--dur-draw-long) var(--ease-draw) 200ms forwards;
}
@keyframes njs-stroke-draw {
to { stroke-dashoffset: 0; }
}
@media (max-width: 768px) { .njs-hero-signature-swoosh { display: none; } }
/* Corner-swoosh card (apparait au hover) */
.njs-card,
.njs-prestation-card,
.njs-persona-card,
.njs-price-card { position: relative; }
.njs-card-corner-swoosh {
position: absolute;
pointer-events: none;
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
}
.njs-card-corner-swoosh--tl { top: 10px; left: 10px; width: 40px; height: 24px; }
.njs-card-corner-swoosh--tr { top: 10px; right: 10px; width: 40px; height: 24px; transform: scaleX(-1); }
.njs-card-corner-swoosh--bl { bottom: 10px; left: 10px; width: 40px; height: 24px; transform: scaleY(-1); }
.njs-card-corner-swoosh--br { bottom: 10px; right: 10px; width: 40px; height: 24px; transform: scale(-1, -1); }
.njs-card:hover .njs-card-corner-swoosh,
.njs-prestation-card:hover .njs-card-corner-swoosh,
.njs-persona-card:hover .njs-card-corner-swoosh,
.njs-price-card:hover .njs-card-corner-swoosh { opacity: 1; }
.njs-card-corner-swoosh path {
fill: none;
stroke: var(--color-orange-200);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 60;
stroke-dashoffset: 60;
transition: stroke-dashoffset var(--dur-slow) var(--ease-draw);
}
.njs-card:hover .njs-card-corner-swoosh path,
.njs-prestation-card:hover .njs-card-corner-swoosh path,
.njs-persona-card:hover .njs-card-corner-swoosh path,
.njs-price-card:hover .njs-card-corner-swoosh path { stroke-dashoffset: 0; }
.njs-persona-card:hover .njs-card-corner-swoosh path { stroke: var(--color-orange-500); }
/* H2 signature — letter-spacing « le titre se pose » */
.njs-h2-signature {
letter-spacing: 0.15em;
transition: letter-spacing var(--dur-x-slow) var(--ease-out);
}
.reveal.in .njs-h2-signature,
.reveal-stagger.in .njs-h2-signature { letter-spacing: var(--ls-snug); }
@media (prefers-reduced-motion: reduce) {
.njs-hero-signature-swoosh path { animation: none; stroke-dashoffset: 0; }
.njs-h2-signature { letter-spacing: var(--ls-snug); transition: none; }
.njs-card-corner-swoosh { opacity: 1; }
.njs-card-corner-swoosh path { stroke-dashoffset: 0; transition: none; }
}
/* =========================================================================
29. PATTERNS PAR PAGE v1.2 (1 par page interne max)
========================================================================= */
/* 29.A — Frise chronologique horizontale (page Qui sommes-nous) */
.njs-frise {
position: relative;
padding: var(--space-7) 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.njs-frise__track {
position: relative;
display: flex;
gap: var(--space-7);
padding: 0 var(--space-5);
min-width: max-content;
}
.njs-frise__axis {
position: absolute;
top: 64px;
left: 0;
right: 0;
height: 2px;
background: var(--color-slate-200);
}
.njs-frise__axis-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: var(--color-orange-500);
transform-origin: left;
}
.njs-frise.reveal.in .njs-frise__axis-fill { animation: njs-frise-draw var(--dur-draw-long) var(--ease-draw) 200ms forwards; }
@keyframes njs-frise-draw { to { width: 100%; } }
.njs-frise__step {
position: relative;
scroll-snap-align: start;
min-width: 220px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 96px;
}
.njs-frise__bullet {
position: absolute;
top: 36px;
width: 56px; height: 56px;
border-radius: var(--radius-full);
background: #fff;
border: 2px solid var(--color-orange-500);
color: var(--color-orange-600);
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
z-index: 2;
transition: transform var(--dur-slow) var(--ease-out);
}
.njs-frise__step:hover .njs-frise__bullet { transform: scale(1.08); }
.njs-frise__year {
position: absolute;
top: -2px;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--color-orange-600);
letter-spacing: 0.05em;
}
.njs-frise__step h3 { font-size: 1.05rem; margin: 0 0 6px; }
.njs-frise__step p { color: var(--color-fg-muted); font-size: 14px; line-height: 1.5; max-width: 220px; }
/* Stagger reveal des bullets */
.njs-frise.reveal-stagger.in .njs-frise__step { animation: njs-frise-bullet-in var(--dur-x-slow) var(--ease-out) forwards; opacity: 0; }
.njs-frise.reveal-stagger.in .njs-frise__step:nth-child(1) { animation-delay: 300ms; }
.njs-frise.reveal-stagger.in .njs-frise__step:nth-child(2) { animation-delay: 450ms; }
.njs-frise.reveal-stagger.in .njs-frise__step:nth-child(3) { animation-delay: 600ms; }
.njs-frise.reveal-stagger.in .njs-frise__step:nth-child(4) { animation-delay: 750ms; }
.njs-frise.reveal-stagger.in .njs-frise__step:nth-child(5) { animation-delay: 900ms; }
.njs-frise.reveal-stagger.in .njs-frise__step:nth-child(6) { animation-delay: 1050ms; }
@keyframes njs-frise-bullet-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.njs-frise__axis-fill { animation: none; width: 100%; }
.njs-frise.reveal-stagger.in .njs-frise__step { animation: none; opacity: 1; transform: none; }
}
/* 29.B — Checks micro-swoosh (fiches prestations, listes Inclus) */
.njs-inclus-col--yes ul li::before {
/* override v1.1 → micro-swoosh SVG dessiné */
content: '';
background: none;
width: 16px; height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 16px 10px;
background-position: center;
background-repeat: no-repeat;
top: 6px;
left: 0;
border-radius: 0;
color: transparent;
font-size: 0;
}
.njs-inclus-col--yes.reveal-stagger.in li::before {
animation: njs-microswoosh-draw 200ms var(--ease-draw) forwards;
}
@keyframes njs-microswoosh-draw {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
.njs-inclus-col--yes.reveal-stagger.in li:nth-child(1)::before { animation-delay: 60ms; }
.njs-inclus-col--yes.reveal-stagger.in li:nth-child(2)::before { animation-delay: 120ms; }
.njs-inclus-col--yes.reveal-stagger.in li:nth-child(3)::before { animation-delay: 180ms; }
.njs-inclus-col--yes.reveal-stagger.in li:nth-child(4)::before { animation-delay: 240ms; }
.njs-inclus-col--yes.reveal-stagger.in li:nth-child(5)::before { animation-delay: 300ms; }
.njs-inclus-col--yes.reveal-stagger.in li:nth-child(6)::before { animation-delay: 360ms; }
/* Items facultatifs (slate-300 sans tracé) */
.njs-inclus-col--yes li.is-optional::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* 29.C — Prix count-up (page Formules & Tarifs) */
.njs-price-amount[data-countup] {
font-variant-numeric: tabular-nums;
}
/* Animation gérée en JS (cf. scripts.js), aucune règle CSS requise */
/* 29.D — Persona card flip 3D (page Pour qui) */
.njs-persona-card--flip {
perspective: 1000px;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
min-height: 320px;
}
.njs-persona-card--flip .njs-persona-card__inner {
position: relative;
width: 100%;
height: 100%;
min-height: 320px;
transform-style: preserve-3d;
transition: transform var(--dur-x-slow) var(--ease-out);
}
.njs-persona-card--flip:hover .njs-persona-card__inner,
.njs-persona-card--flip:focus-within .njs-persona-card__inner,
.njs-persona-card--flip.is-flipped .njs-persona-card__inner { transform: rotateY(180deg); }
.njs-persona-card--flip .njs-persona-face,
.njs-persona-card--flip .njs-persona-back {
position: absolute;
inset: 0;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-xs);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
gap: 12px;
}
.njs-persona-card--flip .njs-persona-back {
background: var(--color-slate-700);
color: #fff;
transform: rotateY(180deg);
border-color: var(--color-slate-700);
}
.njs-persona-card--flip .njs-persona-back h3 { color: #fff; }
.njs-persona-card--flip .njs-persona-back p { color: rgba(255,255,255,0.85); font-size: 14.5px; }
.njs-persona-card--flip .njs-persona-back ul { display: flex; flex-direction: column; gap: 6px; }
.njs-persona-card--flip .njs-persona-back li {
position: relative;
padding-left: 22px;
color: rgba(255,255,255,0.85);
font-size: 14px;
line-height: 1.55;
}
.njs-persona-card--flip .njs-persona-back li::before {
content: ''; position: absolute; left: 0; top: 7px;
width: 12px; height: 8px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 8px;
background-repeat: no-repeat;
}
.njs-persona-card--flip .njs-persona-back .njs-btn { margin-top: auto; align-self: flex-start; }
/* Tablette / mobile : flip remplacé par overlay slide-up */
@media (max-width: 768px) {
.njs-persona-card--flip { perspective: none; }
.njs-persona-card--flip .njs-persona-card__inner { transform-style: flat; transition: none; }
.njs-persona-card--flip:hover .njs-persona-card__inner,
.njs-persona-card--flip:focus-within .njs-persona-card__inner,
.njs-persona-card--flip.is-flipped .njs-persona-card__inner { transform: none; }
.njs-persona-card--flip .njs-persona-back {
transform: translateY(100%);
transition: transform var(--dur-slow) var(--ease-out);
backface-visibility: visible;
}
.njs-persona-card--flip:hover .njs-persona-back,
.njs-persona-card--flip:focus-within .njs-persona-back,
.njs-persona-card--flip.is-flipped .njs-persona-back { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.njs-persona-card--flip .njs-persona-card__inner { transition: none; transform: none !important; }
.njs-persona-card--flip .njs-persona-back { transform: none; opacity: 0; pointer-events: none; transition: none; }
.njs-persona-card--flip:focus-within .njs-persona-back,
.njs-persona-card--flip:hover .njs-persona-back { opacity: 1; pointer-events: auto; transform: none; }
}
/* 29.E — FAQ chevron morphé en swoosh (page FAQ) */
.njs-faq-item .njs-faq-icon--swoosh {
width: 36px; height: 36px;
background: transparent;
border: 1px solid var(--color-border);
}
.njs-faq-item .njs-faq-icon--swoosh::before,
.njs-faq-item .njs-faq-icon--swoosh::after {
/* override v1.1 cross */
content: none;
}
.njs-faq-item .njs-faq-icon--swoosh svg {
width: 20px; height: 20px;
color: var(--color-fg-muted);
transition: transform var(--dur-slow) var(--ease-out);
}
.njs-faq-item .njs-faq-icon--swoosh svg path {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: d var(--dur-slow) var(--ease-draw), stroke var(--dur-slow);
}
.njs-faq-item.open .njs-faq-icon--swoosh {
background: var(--color-orange-500);
border-color: var(--color-orange-500);
}
.njs-faq-item.open .njs-faq-icon--swoosh svg { color: #fff; transform: rotate(0deg); }
.njs-faq-item.open .njs-faq-icon--swoosh svg path {
/* Morph path : chevron > devient swoosh ouvert ( */
stroke: #fff;
}
/* 29.F — Submit en swoosh-shape + transformation check swoosh à l'envoi (page Contact) */
.njs-btn--submit-swoosh {
position: relative;
background: var(--color-orange-500);
color: #fff;
padding: 14px 32px 14px 28px;
border-radius: 24px 32px 22px 30px / 28px 24px 30px 26px;
font-weight: 700;
border: 0;
transition: background var(--dur-base) var(--ease-out), border-radius var(--dur-slow);
}
.njs-btn--submit-swoosh:hover { background: var(--color-orange-600); }
.njs-btn--submit-swoosh.is-success {
background: var(--color-orange-500);
width: 56px; height: 56px; padding: 0;
border-radius: 50%;
color: transparent;
position: relative;
}
.njs-btn--submit-swoosh.is-success::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 30px; height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 30px 16px;
background-repeat: no-repeat;
animation: njs-check-pop 400ms var(--ease-out) forwards;
}
@keyframes njs-check-pop {
0% { transform: translate(-50%, -50%) scale(0); }
60% { transform: translate(-50%, -50%) scale(1.1); }
100% { transform: translate(-50%, -50%) scale(1); }
}
/* Coordonnées contact — underline swoosh hover */
.njs-contact-row a {
position: relative;
display: inline-block;
}
.njs-contact-row a::after {
content: '';
position: absolute;
left: 0; right: 100%;
bottom: -2px;
height: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
transition: right var(--dur-base) var(--ease-out);
}
.njs-contact-row a:hover::after,
.njs-contact-row a:focus-visible::after { right: 0; }
/* =========================================================================
30. SWOOSH PARALLAX V2 — rotation douce en plus de la translation (v1.1)
La logique JS calcule maintenant aussi scrollY * dataRotation ±3-5°.
Le CSS conserve will-change: transform.
========================================================================= */
.njs-swoosh[data-parallax] { transition: none; } /* transform piloté en JS */
/* =========================================================================
31. BOUTON GHOST LIGHT (réservé contextes inverses)
========================================================================= */
.njs-btn--ghost-light {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.6);
}
.njs-btn--ghost-light:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.9); }
/* =========================================================================
32. EXTENSIONS REDUCED-MOTION (centralisation v1.2)
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.njs-hero-signature-swoosh path { animation: none !important; stroke-dashoffset: 0 !important; }
.njs-swoosh[data-parallax] { transform: none !important; }
.njs-vtimeline__axis-fill { transition: none; height: 100% !important; }
.njs-frise__axis-fill { animation: none; width: 100%; }
.njs-card-corner-swoosh { opacity: 1; }
.njs-card-corner-swoosh path { stroke-dashoffset: 0; transition: none; }
.njs-h2-signature { letter-spacing: var(--ls-snug); transition: none; }
}
/* v1.2.3 — layout 2 colonnes (logo Network Interim à gauche, texte à droite) dans le bloc slate */
@media (min-width: 768px) {
.njs-parent-grid {
grid-template-columns: 280px 1fr !important;
gap: 48px !important;
}
}
/* =========================================================================
34. CONSTATS v1.2.3 — liste numérotée non-card (pas de box, pas de fond)
Pour les "tâches qui vous freinent" sur la home : visuellement distinct
des cards solutions qui suivent.
========================================================================= */
.njs-constats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6) var(--space-7);
}
@media (min-width: 768px) { .njs-constats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .njs-constats { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-8); } }
.njs-constat {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-5);
align-items: start;
padding: 0;
border: 0;
background: transparent;
}
.njs-constat-num {
font-family: var(--font-display);
font-size: clamp(40px, 4.5vw, 56px);
font-weight: 600;
color: var(--color-accent);
line-height: 1;
font-variation-settings: "opsz" 48;
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.njs-constat h3 {
font-size: var(--fs-h4);
margin: 0 0 6px;
color: var(--color-fg);
}
.njs-constat p {
color: var(--color-fg-muted);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
/* =========================================================================
33. BUGFIXES v1.2 post-déploiement webserv10
========================================================================= */
/* Bug : le dos des persona flip cards s'affichait en miroir au-dessus de la face en état initial.
Cause : .reveal-stagger > * applique `transform: translateY(24px)` sur l'article parent.
Ce transform crée un nouveau stacking context qui FLATTEN le `transform-style: preserve-3d`
de l'inner, empêchant `backface-visibility: hidden` de fonctionner.
Fix : neutraliser le transform sur les flip cards, garder uniquement l'opacity pour le reveal.
Override aussi le hover lift hérité de .njs-persona-card qui aurait le même effet au hover. */
.reveal-stagger > .njs-persona-card--flip {
transform: none !important;
transition: opacity var(--dur-x-slow) var(--ease-out);
}
.njs-persona-card--flip:hover {
transform: none;
box-shadow: none;
}
/* Bug : .njs-persona-card hérite de `display: flex; flex-direction: column;` ce qui peut
poser problème avec le contexte 3D. On force display:block sur la flip card. */
.njs-persona-card--flip { display: block; }
/* Responsive type scale on H1 */
@media (max-width: 640px) {
:root {
--fs-h1: 2.25rem;
--fs-h2: 1.75rem;
--fs-h3: 1.375rem;
--fs-display: 2.75rem;
}
}