tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: [‘Inter’, ‘sans-serif’],
},
},
},
}

::selection { background: #e7e5e4; color: #1c1917; }
html { scroll-padding-top: 20px; }

/* Grain texture overlay */
.grain-overlay::before {
content: »;
position: absolute;
inset: 0;
background-image: url(« data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’noise’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noise)’ opacity=’0.04’/%3E%3C/svg%3E »);
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}

/* Fade in up animation */
.fade-in-up {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}

/* FAQ accordion */
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
max-height: 300px;
padding-top: 12px;
}
.faq-item.open .faq-chevron {
transform: rotate(180deg);
}
.faq-chevron {
transition: transform 0.3s ease;
}

/* TOC active state */
.toc-link.active {
color: #1c1917;
font-weight: 600;
border-left-color: #22c55e;
}

/* Progress bar */
#progress-bar {
width: 0%;
transition: width 0.1s linear;
}

/* Stat card hover */
.stat-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 50px -12px rgba(231,229,228,0.5);
}

/* Table styling */
.styled-table tr {
transition: background-color 0.15s ease;
}
.styled-table tbody tr:hover {
background-color: rgba(250,250,249,0.8);
}

/* Mobile TOC */
.mobile-toc {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.mobile-toc.open {
max-height: 600px;
}

Nabil Creative Studio

Guide SEO 2026

Pourquoi et comment avoir un bon score SEO et mieux se positionner sur
Google en 2026

Maîtrisez les clés du référencement naturel pour générer du trafic qualifié, augmenter vos ventes et dominer les résultats de recherche.

Janvier 2026

15 min de lecture

Nabil Creative Studio

8.5B

Recherches Google / jour

90%

Part de marché Google

60%

Trafic web mobile

46%

Recherches locales

// Progress bar
window.addEventListener(‘scroll’, () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight – document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById(‘progress-bar’).style.width = scrolled + ‘%’;
});

// Fade in up on scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘visible’);
}
});
}, { threshold: 0.1, rootMargin: ‘0px 0px -40px 0px’ });

document.querySelectorAll(‘.fade-in-up’).forEach(el => observer.observe(el));

// TOC active state
const tocLinks = document.querySelectorAll(‘.toc-link’);
const sections = document.querySelectorAll(‘section[id]’);

window.addEventListener(‘scroll’, () => {
let current = »;
sections.forEach(section => {
const sectionTop = section.offsetTop – 120;
if (pageYOffset >= sectionTop) {
current = section.getAttribute(‘id’);
}
});

tocLinks.forEach(link => {
link.classList.remove(‘active’);
if (link.getAttribute(‘href’) === ‘#’ + current) {
link.classList.add(‘active’);
}
});
});

// FAQ accordion
document.querySelectorAll(‘.faq-toggle’).forEach(btn => {
btn.addEventListener(‘click’, () => {
const item = btn.closest(‘.faq-item’);
const isOpen = item.classList.contains(‘open’);

// Close all
document.querySelectorAll(‘.faq-item’).forEach(i => i.classList.remove(‘open’));

// Toggle current
if (!isOpen) {
item.classList.add(‘open’);
}
});
});

// Mobile TOC toggle
document.getElementById(‘toc-toggle’).addEventListener(‘click’, () => {
const toc = document.getElementById(‘mobile-toc’);
const chevron = document.querySelector(‘#toc-toggle .faq-chevron’);
toc.classList.toggle(‘open’);
chevron.style.transform = toc.classList.contains(‘open’) ? ‘rotate(180deg)’ : ‘rotate(0)’;
});

// Close mobile TOC on link click
document.querySelectorAll(‘#mobile-toc a’).forEach(link => {
link.addEventListener(‘click’, () => {
document.getElementById(‘mobile-toc’).classList.remove(‘open’);
document.querySelector(‘#toc-toggle .faq-chevron’).style.transform = ‘rotate(0)’;
});
});