.nl-sticky-nav {
position: fixed;
right: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 12px;
}
.nl-sticky-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: pointer;
opacity: 0.35;
transition: opacity 0.2s;
}
.nl-sticky-item.active,
.nl-sticky-item:hover {
opacity: 1;
}
.nl-sticky-icon {
width: 40px;
height: 40px;
background: #fff;
border: 1px solid #e0ddd6;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.nl-sticky-item.active .nl-sticky-icon {
border-color: var(--theme-color);
background: var(--theme-color-light, #FFFCF3);
}
.nl-sticky-item span {
font-size: 10px;
color: var(--color-text);
white-space: nowrap;
text-align: center;
font-family: var(--font-body);
}
li#menu-item-486 {
background-color: var(--color-primary);
} section.nl-hero.py-3xl {
padding-top: 200px;
}
.nl-hero-title {
font-size: 48px;
font-weight: 300;
line-height: 1.25;
margin: 16px auto 20px;
max-width: 740px;
}
h1.top-title.text-primary {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
line-height: 100%;
text-align: center;
}
.nl-hero-title h2 span.nineties {
font-weight: 700;
font-size: 52px;
line-height: 48px;
}
.nl-hero-sub {
font-size: 15px;
line-height: 1.7;
color: #555;
max-width: 580px;
margin: 0 auto 32px;
} .nl-tabs-wrap {
overflow: hidden;
margin-bottom: 0;
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 50px;
}
.nl-tab {
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 0.875rem 2rem;
font-size: 1.125rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s;
}
.nl-tab.active {
background: #BFC4FF;
color: #3A39FF;
} .nl-panel {
display: none;
}
.nl-panel.active {
display: block;
animation: nlFadeIn 0.3s ease;
}
@keyframes nlFadeIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}
.nl-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
border: 1.5px dashed #ccc;
border-radius: 16px;
padding: 40px;
} .nl-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 500;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
font-family: Bricolage Grotesque;
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.nl-description p {
font-family: Bricolage Grotesque;
font-weight: 400;
font-style: Regular;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.nl-rubriques-title {
font-family: Bricolage Grotesque;
font-weight: 400;
font-style: Regular;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.nl-rubriques {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
}
.nl-rubrique-header {
display: flex;
gap: 12px;
}
.nl-rubrique-header svg {
flex-shrink: 0;
margin-top: 4px;
height: 100;
}
.nl-rubrique-header h4 {
font-family: Bricolage Grotesque;
font-weight: 600;
font-style: SemiBold;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.nl-rubrique-header p {
font-family: Albert Sans;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 18px;
letter-spacing: 0%;
}
.nl-frequence {
font-size: 13px;
line-height: 1.7;
margin-top: 16px;
} .nl-form-card {
background: rgb(191 196 255 / 20%);
display: flex;
flex-direction: column;
gap: 12px;
padding: 40px;
}
.nl-form-eyebrow {
font-size: 13px;
color: #3A39FF;
font-weight: 600;
margin: 0;
font-family: Bricolage Grotesque 24pt;
font-weight: 500;
font-style: Medium;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
#nl-bulletin .nl-form-title {
font-size: 24px;
font-weight: 700;
color: #3A39FF;
font-family: var(--font-display);
margin: 0 0 8px;
font-family: Behind The Nineties;
font-weight: 700;
font-style: Bold;
font-size: 28px;
leading-trim: NONE;
line-height: 34px;
letter-spacing: 0%;
}
.nl-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.nl-field input[type="text"],
.nl-field input[type="email"] {
width: 100%;
border-radius: 8px;
padding: 11px 14px;
font-size: 14px;
font-family: var(--font-body);
background: #fff;
color: var(--color-text);
outline: none;
transition: border-color 0.2s;
border: none;
}
.nl-field input:focus {
border-color: var(--color-text);
}
.nl-field-checkbox label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: #555;
cursor: pointer;
line-height: 1.5;
}
.nl-field-checkbox input[type="checkbox"] {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 1px;
accent-color: var(--color-text);
}
.nl-submit {
align-self: flex-end;
border-radius: 99px;
}
.nl-linkedin-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 22px 20px;
border: 1.5px solid #0077b5;
border-radius: 99px;
color: #0077b5;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, color 0.2s;
margin-top: 4px;
}
#nl-bulletin .nl-linkedin-btn {
background: #3A39FF;
border-radius: 10px;
color: #BFC4FF;
font-family: Bricolage Grotesque;
font-weight: 600;
font-style: SemiBold;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;
}
.nl-linkedin-btn:hover {
background: #0077b5;
color: #fff;
} .nl-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 28px;
}
.nl-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: background 0.2s, border-radius 0.2s, width 0.2s;
}
.nl-dot.active {
background: var(--color-text);
border-radius: 4px;
width: 20px;
}
#nl-bulletin rect {
fill: #3A39FF;
}
#nl-bulletin .nl-eyebrow {
color: #3A39FF;
} .nl-pourquoi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.nl-pourquoi-title {
font-size: clamp(24px, 3vw, 36px);
font-weight: 300;
line-height: 1.3;
margin-bottom: 32px;
font-family: var(--font-display);
}
.nl-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.nl-feature {
display: flex;
flex-direction: column;
gap: 8px;
}
.nl-feature-icon {
width: 40px;
height: 40px;
margin-bottom: 4px;
}
.nl-feature-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.nl-feature h4 {
font-size: 15px;
font-weight: 600;
margin: 0;
color: var(--color-text);
}
.nl-pourquoi-right {
display: flex;
flex-direction: column;
gap: 16px;
}
.nl-pourquoi-photo {
border-radius: 12px;
overflow: hidden;
background: #e8e5de;
}
.nl-pourquoi-photo-top {
height: 200px;
}
.nl-pourquoi-photo-bottom {
height: 354px;
}
.nl-pourquoi-photo img {
width: 100%;
height: 100%;
object-fit: cover; } .nl-banniere {
background: var(--theme-color-light, #FFFCF3);
}
.nl-banniere-inner {
display: grid;
grid-template-columns: 120px 1fr 1fr;
gap: 40px;
align-items: center;
background: #EFE7D4;
border-radius: 16px;
padding: 40px;
}
.nl-banniere-illo {
width: 100px;
height: 100px;
}
.nl-banniere-illo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.nl-banniere-title {
font-size: clamp(18px, 2.5vw, 26px);
font-weight: 300;
line-height: 1.3;
margin: 8px 0 0;
font-family: var(--font-display);
}
.nl-banniere-right p {
font-size: 14px;
color: #444;
line-height: 1.7;
margin-bottom: 20px;
} .nl-editions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
max-width: 990px;
margin: auto;
}
.nl-edition-card {
border-radius: 12px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nl-edition-orange {
background: #FFF0E6;
}
.nl-edition-blue {
background: #EEF2FF;
}
.nl-edition-meta {
display: flex;
align-items: center;
gap: 12px;
}
.nl-edition-tag {
font-size: 12px;
font-weight: 600;
color: #555;
}
.nl-edition-date {
font-size: 12px;
color: #888;
}
.nl-edition-title {
color: #FF4B00;
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 100%;
letter-spacing: 0%;
}
.nl-edition-excerpt {
margin: 0;
flex: 1;
font-family: Albert Sans;
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 0%;
max-width: 90%;
margin-bottom: 50px;
}
.nl-edition-btn {
display: inline-block;
padding: 10px 22px;
border-radius: 99px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
align-self: flex-start;
transition: opacity 0.15s;
}
.nl-edition-btn:hover {
opacity: 0.85;
}
.nl-edition-btn-orange {
background: #E85D30;
color: #fff;
margin: auto;
}
.nl-edition-btn-blue {
background: #3A3AFF;
color: #fff;
margin: auto;
}
.nl-edition-orange .nl-edition-meta span, .nl-edition-orange h3.nl-edition-title, .nl-edition-orange .nl-edition-excerpt{
color: #FF4B00;
}
.nl-edition-blue .nl-edition-meta, .nl-edition-blue h3.nl-edition-title, .nl-edition-blue .nl-edition-excerpt {
color: #3A39FF;
} .nl-faq-grid {
display: grid;
grid-template-columns: 1fr 692px;
gap: 60px;
align-items: start;
}
.nl-faq-title {
font-size: clamp(22px, 3vw, 32px);
font-weight: 300;
line-height: 1.3;
font-family: var(--font-display);
}
.nl-faq-item {
border-bottom: 1px solid #e8e5de;
}
.nl-faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
background: none;
border: none;
cursor: pointer;
font-size: 15px;
font-family: var(--font-body);
color: var(--color-text);
text-align: left;
gap: 16px;
}
.nl-faq-icon {
flex-shrink: 0;
position: relative;
width: 24px;
height: 24px;
}
.nl-faq-icon .icon-minus,
.nl-faq-icon .icon-plus {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.2s;
}
.nl-faq-item .icon-minus { opacity: 0; }
.nl-faq-item .icon-plus  { opacity: 1; }
.nl-faq-item.active .icon-minus { opacity: 1; }
.nl-faq-item.active .icon-plus  { opacity: 0; }
.nl-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.nl-faq-answer p {
font-size: 14px;
line-height: 1.7;
color: #555;
padding-bottom: 18px;
}
.cta-contact h2 {
padding: 0;
} @media (max-width: 1024px) {
.nl-sticky-nav { display: none; }
.nl-content-grid,
.nl-pourquoi-grid,
.nl-banniere-inner,
.nl-editions-grid,
.nl-faq-grid {
grid-template-columns: 1fr;
}
.nl-banniere-inner {
grid-template-columns: 1fr;
text-align: center;
}
.nl-banniere-illo {
margin: 0 auto;
}
.nl-faq-grid {
gap: 32px;
}
}
@media (max-width: 768px) {
.nl-content-grid {
padding: 24px;
gap: 32px;
}
.nl-features-grid {
grid-template-columns: 1fr;
}
.nl-pourquoi-photo-top,
.nl-pourquoi-photo-bottom {
height: 180px;
}
.nl-hero-title {
font-size: 26px;
}
}