في بحر الإنترنت الشاسع عام 2026، تُعدّ الرؤية هي المعيار الوحيد. إذا كان المحتوى هو الملك، فإنّ عنوان الصفحة هو تاجه بلا شك. غالبًا ما يُهمل أو يُكتب على عجل، إلا أنه يُمثّل نقطة الاتصال الأولى بين موقعك والمستخدم، فهو بمثابة منارة وسط زخم نتائج البحث. لا يقتصر تحسين عنوان الصفحة (HTML) لمحركات البحث على إرضاء برامج الروبوت فحسب، بل هو أمر بالغ الأهمية لجذب انتباه المستخدمين وتحفيزهم على النقر. في عصر يُعيد فيه الذكاء الاصطناعي تشكيل عادات التصفح، لم يعد فهم آليات العنوان عالي الأداء خيارًا، بل ضرورة حتمية لكل من يرغب في الحفاظ على موقعه ضمن نتائج البحث.
- باختصار: أساسيات العنوان عالي الأداء
- يُعدّ عنوان الصفحة ثاني أهم عامل مؤثر في ترتيب الصفحة بعد المحتوى نفسه.
- يُقاس الطول الأمثل له بالبكسل، ويُعادل عادةً 50-60 حرفًا.
- يجب إعطاء الأولوية لنية البحث على مجرد وضع الكلمات المفتاحية.
يُعدّ تفرّد كل عنوان أمرًا بالغ الأهمية لتجنب التداخل بين العناوين. يجب أن يتكامل العنوان مع الوصف التعريفي لزيادة نسبة النقر إلى الظهور (CTR).
يُفضّل وضع الكلمات المفتاحية الاستراتيجية في بداية سلسلة الكلمات المفتاحية (الترتيب المُسبق). فهم آلية عمل وسم العنوان وتأثيره المباشر
للتغلّب على صعوبات تحسين محركات البحث بفعالية، من الضروري فهم ماهية وسم العنوان من الناحية التقنية. يقع في قسم
العنوان، وهو جزء من كود HTML لصفحتك، غير مرئي عند عرض الصفحة نفسها، ولكنه حاضر في كل مكان. إنه ما يظهر في تبويب متصفحك، والأهم من ذلك، أنه الرابط الأزرق الرئيسي القابل للنقر في نتائج بحث جوجل. تخيله كلوحة متجرك: إذا كانت مظلمة أو متسخة أو غير مفهومة، فلن يدخل أحد، حتى لو كان التصميم الداخلي جميلاً.
→ À lire aussi
من ماجستير إدارة الأعمال إلى أولمبياد تحسين محركات البحث: نيكولاس بوشاند يحلل تحول تحسين محركات البحث في عصر نماذج اللغة المتقدمة
يؤثر العنوان على تحسين محركات البحث (SEO) بطريقتين. أولاً، يسمح للخوارزميات بفهم موضوع الصفحة فوراً وفهرستها بشكل صحيح. ثانياً، يلعب دوراً نفسياً هاماً بالنسبة للمستخدم. فالعنوان المُصاغ جيداً بمثابة وعد بالقيمة. إذا فشلت في هذه المرحلة، سيظل كل العمل الذي بذلته على بنية المحتوى، وخاصةً مع وسوم Hn وتسلسلها الهرمي، غير مرئي للجمهور. إنه عامل تحسين أداء لا يتطلب موارد تقنية كثيرة، ولكنه يتطلب مهارة كتابة عالية.
تطور خوارزمية جوجل والذكاء الدلالي في عام 2026،
تجاوزت خوارزمية جوجل التحليل المعجمي البسيط. لم يعد مجرد تجميع الكلمات المفتاحية كافيًا لضمان ملاءمتها. تُقيّم محركات البحث الآن الترابط العام بين العنوان ومحتوى الصفحة، والأهم من ذلك، نية المستخدم. إذا وعد عنوان صفحتك بإجابة دقيقة بينما المحتوى غامض، فستُعاقب فورًا بانخفاض معدل الارتداد، مما سيؤثر سلبًا على ترتيبك على المدى الطويل. لذا، يجب تصميم استراتيجية تحسين محركات البحث مع مراعاة احتياجات المستخدمين قبل الآلات، مع احترام المعايير التقنية للآلات.
https://www.youtube.com/watch?v=zoIPIge385w استراتيجية الكلمات المفتاحية: الموضع والملاءمة
يُعدّ اختيار الكلمات المناسبة لعنوانك المرحلة الحاسمة التي تُحسم فيها معظم المنافسة. لا يتعلق الأمر بالتخمين، بل بالتحليل. يجب أن يتبع دمج الكلمات المفتاحية استراتيجية “الترتيب المُسبق”. عمليًا، يعني هذا أن تظهر أهم الكلمات في بداية عنوان الصفحة قدر الإمكان، ويفضل أن تكون في بدايته. تُولي برامج زحف محركات البحث أهمية أكبر للكلمات الأولى، كما يرى المستخدمون، الذين يتصفحون النتائج بشكل عشوائي، هذه الكلمات أولًا. يُعدّ البحث المُعمّق ضروريًا لتحديد حجم البحث وجدوى الاستراتيجية. غالبًا ما يكون استهداف كلمة مفتاحية عامة جدًا مضيعة للوقت في مواجهة الكلمات المفتاحية الرائدة. تكمن الاستراتيجية الناجحة عادةً في الكلمات المفتاحية الطويلة: عبارات أكثر تحديدًا وأقل تنافسية تُحقق نتائج أفضل لأنها تُخاطب غرض بحث مُحدد. على سبيل المثال، بدلًا من “أحذية رياضية”، اختر “أفضل أحذية جري للماراثون 2026”. تجنّب الإفراط في تحسين محركات البحث وحشو الكلمات المفتاحية.
→ À lire aussi
AWi في حفل توزيع جوائز Semy: يؤكد تحسين محركات البحث على نفسه كرافعة حقيقية للنمو
علاوة على ذلك، يُعدّ التفرّد أمرًا بالغ الأهمية. يجب أن يحمل كل صفحة من صفحات موقعك عنوانًا فريدًا. إذا تشابهت عناوين عدة صفحات، فلن يتمكّن جوجل من تحديد الصفحة التي يجب إعطاؤها الأولوية، مما يُضعف فرص ظهور موقعك في نتائج البحث. هذه مشكلة تقنية شائعة يُمكن حلّها أو إدارتها أحيانًا من خلال الاستخدام الأمثل لعلامة canonical.
للإشارة إلى الصفحة الرئيسية في حال وجود محتوى مشابه، تبقى القاعدة الذهبية: صفحة واحدة، هدف واحد، عنوان فريد واحد. طول العنوان: مسألة بكسلات ووضوح
يُعدّ طول العنوان قيدًا تقنيًا صارمًا تفرضه مساحة عرض الشاشة. على الرغم من شيوع ذكر 60 حرفًا، إلا أن الواقع أكثر تعقيدًا: إذ تُخصّص جوجل عرضًا ثابتًا بالبكسلات (حوالي 600 بكسل على شاشة الكمبيوتر). ولأنّ عرض الأحرف ليس متساويًا (حرف “م” يشغل مساحة أكبر من حرفي “ي” أو “ل”)، يبقى عدد الأحرف تقديريًا.
Vous avez un projet spécifique ?
Kevin Grillot accompagne entrepreneurs et PME en SEO, webmarketing et stratégie digitale. Bénéficiez d'un audit ou d'un accompagnement sur-mesure.
إذا تجاوز عنوانك هذا الحد، فسيتم اقتطاعه واستبداله بعلامات حذف (…). قد يكون هذا كارثيًا إذا كانت المعلومات الأساسية أو دعوة المستخدم لاتخاذ إجراء في نهاية الجملة. في المقابل، يُعدّ العنوان القصير جدًا (مثل “الرئيسية”) فرصة ضائعة لإضافة سياق وكلمات مفتاحية ذات صلة. يجب أن تسعى إلى اختيار المساحة المثلى التي تُتيح عرض الرسالة كاملةً دون اقتطاعها.
عنوان صفحتك </span>
</div>
</div>
<!-- Zone de Prévisualisation (Onglets) -->
<div class="bg-slate-50 rounded-xl border border-slate-200 p-1 md:p-2">
<!-- Contrôles des onglets -->
<div class="flex space-x-2 mb-4 p-2">
<button onclick="switchView('desktop')" id="btn-desktop" class="flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-indigo-600 ring-1 ring-indigo-100">
0 أحرف
</button>
<button onclick="switchView('mobile')" id="btn-mobile" class="flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all text-slate-500 hover:bg-white hover:text-slate-700">
الحد التقريبي (600 بكسل)
</button>
</div>
<!-- Conteneur Prévisualisation -->
<div class="bg-white rounded-lg p-6 shadow-sm min-h-[160px] border border-slate-100">
<!-- Vue Desktop -->
<div id="view-desktop" class="preview-font max-w-[600px]">
<div class="flex items-center gap-2 mb-1">
<div class="w-7 h-7 bg-slate-100 rounded-full flex items-center justify-center text-xs border border-slate-200">0 بكسل</div>
<div class="flex flex-col leading-tight">
<span class="text-sm text-slate-800 font-medium">0 / 600 بكسل</span>
<cite class="text-xs text-slate-500 not-italic">سطح المكتب</cite>
</div>
</div>
<h3 class="text-xl google-blue hover:underline cursor-pointer mb-1 leading-snug truncate-title" id="desktop-preview-title">
الجوال
</h3>
<p class="text-sm google-grey leading-snug">
جوال
</p>
</div>
<!-- Vue Mobile -->
<div id="view-mobile" class="preview-font hidden max-w-[380px] mx-auto border-x border-slate-50 px-2">
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-xs border border-slate-200">جوال</div>
<div class="flex flex-col leading-tight">
<span class="text-sm text-slate-800 font-medium">ExampleSite.fr</span>
<span class="text-xs text-slate-500 truncate">https://www.examplesite.fr › blog › seo-2026</span>
</div>
</div>
<h3 class="text-lg mobile-blue font-medium mb-1 leading-snug truncate-title" id="mobile-preview-title">
سيظهر عنوان صفحتك هنا…
</h3>
<p class="text-sm text-slate-600 leading-snug">
هذا وصف افتراضي لتوضيح كيفية ظهور عنوان صفحتك في نتائج البحث. يُعد العنوان أعلاه أهم عنصر لنسبة النقر إلى الظهور.
</p>
</div>
</div>
</div>
<!-- Conseils dynamiques -->
<div id="seo-tips" class="mt-6 p-4 rounded-lg bg-blue-50 text-blue-800 text-sm hidden border border-blue-100">
<!-- Injecté via JS -->
</div>
<!-- Script de logique -->
<script type="rocketlazyloadscript">
/**
* Logique du simulateur de Balise Title
* API: Aucune API externe requise (calcul local pour performance max)
* Méthode: Utilisation d'un Canvas HTML5 invisible pour mesurer la largeur exacte en pixels du texte
* selon la police utilisée par Google (Arial 20px pour Desktop).
*/
(function() {
// Éléments du DOM
const input = document.getElementById('title-input');
const pixelCountDisplay = document.getElementById('pixel-count');
const charCountDisplay = document.getElementById('char-count');
const pixelBar = document.getElementById('pixel-bar');
const statusIcon = document.getElementById('status-icon');
const desktopTitle = document.getElementById('desktop-preview-title');
const mobileTitle = document.getElementById('mobile-preview-title');
const tipsContainer = document.getElementById('seo-tips');
// Configuration Google (Approximations 2026 based on current standards)
const MAX_PIXEL_WIDTH = 600; // La zone de danger commence ici
const SAFE_PIXEL_WIDTH = 580; // Zone sûre
const GOOGLE_FONT = '20px Arial, sans-serif'; // Police standard titre Desktop
// Canvas pour mesure précise
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// Fonction pour mesurer la largeur en pixels
function getTextWidth(text, font) {
context.font = font;
const metrics = context.measureText(text);
return Math.ceil(metrics.width);
}
// Fonction pour tronquer le texte si trop long (Simulation "...")
function truncateText(text, maxWidth, font) {
const width = getTextWidth(text, font);
if (width <= maxWidth) return text;
let lo = 0, hi = text.length - 1;
// Recherche binaire pour trouver le point de coupure optimal
while (lo <= hi) {
const mid = Math.floor((lo + hi) / 2);
const currentText = text.slice(0, mid) + '...';
if (getTextWidth(currentText, font) < maxWidth) {
lo = mid + 1;
} else {
hi = mid - 1;
}
}
return text.slice(0, hi) + '...';
}
// Fonction de mise à jour de l'UI
function updateSimulator() {
const text = input.value || "Votre titre apparaîtra ici...";
const charLength = input.value.length;
// Calcul des pixels
const pixelWidth = getTextWidth(input.value, GOOGLE_FONT);
// Mise à jour des compteurs
charCountDisplay.textContent = `${charLength} caractères`;
pixelCountDisplay.textContent = `${pixelWidth} / ${MAX_PIXEL_WIDTH}px`;
// Mise à jour de la barre de progression
// On normalise sur 650px pour laisser un peu de marge rouge à la fin
const percentage = Math.min((pixelWidth / 650) * 100, 100);
pixelBar.style.width = `${percentage}%`;
// Gestion des couleurs et états
let statusColor = 'bg-indigo-500';
let icon = '';
let tips = '';
if (charLength === 0) {
statusColor = 'bg-slate-300';
icon = '';
} else if (pixelWidth < 200) {
statusColor = 'bg-yellow-400'; // Trop court
icon = '';
tips = ' <strong>Conseil : Votre titre est un peu court. Profitez de l'espace pour ajouter des mots-clés pertinents.';
} else if (pixelWidth <= SAFE_PIXEL_WIDTH) {
statusColor = 'bg-green-500'; // Parfait
icon = '';
tips = ' <strong>Excellent ! La longueur est optimale. Assurez-vous que le titre incite au clic.';
} else if (pixelWidth <= MAX_PIXEL_WIDTH) {
statusColor = 'bg-yellow-500'; // Attention limite
icon = '';
tips = ' <strong>Attention : Vous approchez de la limite. Google pourrait couper votre titre sur certains écrans.';
} else {
statusColor = 'bg-red-500'; // Trop long
icon = '';
tips = ' <strong>Trop long : Votre titre sera tronqué par Google. Essayez de reformuler pour rester sous les 600px.';
}
pixelBar.className = `h-full gauge-transition w-0 relative ${statusColor}`;
statusIcon.textContent = icon;
pixelCountDisplay.className = `font-bold ${pixelWidth > MAX_PIXEL_WIDTH ? 'text-red-600' : 'text-slate-600'}`;
// Affichage des conseils
if (tips && input.value.length > 0) {
tipsContainer.innerHTML = tips;
tipsContainer.className = `mt-6 p-4 rounded-lg text-sm border flex items-start gap-2 ${
pixelWidth > MAX_PIXEL_WIDTH ? 'bg-red-50 text-red-800 border-red-100' :
pixelWidth < 200 ? 'bg-yellow-50 text-yellow-800 border-yellow-100' :
'bg-green-50 text-green-800 border-green-100'
}`;
tipsContainer.classList.remove('hidden');
} else {
tipsContainer.classList.add('hidden');
}
// Mise à jour des aperçus avec troncation simulée
// Desktop: coupe vers 600px
desktopTitle.textContent = truncateText(text, MAX_PIXEL_WIDTH, GOOGLE_FONT);
// Mobile: coupe souvent un peu plus tôt (approx 550px-580px selon device, on simule strict)
mobileTitle.textContent = truncateText(text, 560, GOOGLE_FONT);
}
// Écouteur d'événement
input.addEventListener('input', updateSimulator);
// Init
updateSimulator();
})();
// Fonction globale pour changer les onglets (exposée window)
window.switchView = function(view) {
const btnDesktop = document.getElementById('btn-desktop');
const btnMobile = document.getElementById('btn-mobile');
const viewDesktop = document.getElementById('view-desktop');
const viewMobile = document.getElementById('view-mobile');
if (view === 'desktop') {
viewDesktop.classList.remove('hidden');
viewMobile.classList.add('hidden');
btnDesktop.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-indigo-600 ring-1 ring-indigo-100";
btnMobile.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all text-slate-500 hover:bg-white hover:text-slate-700";
} else {
viewDesktop.classList.add('hidden');
viewMobile.classList.remove('hidden');
btnMobile.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-indigo-600 ring-1 ring-indigo-100";
btnDesktop.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all text-slate-500 hover:bg-white hover:text-slate-700";
}
};
</script>
</div>
<h3 class="wp-block-heading"></h3>
<p>جوال</p>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%85%d8%a7-%d9%87%d9%8a-%d9%85%d8%ac%d9%85%d9%88%d8%b9%d8%a9-%d8%a7%d9%84%d9%85%d9%88%d8%a7%d8%b6%d9%8a%d8%b9-%d9%88%d9%83%d9%8a%d9%81-%d9%8a%d9%85%d9%83%d9%86%d9%83-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af/" class="kg-encart-article" aria-label="Lire aussi : ما هي مجموعة المواضيع وكيف يمكنك استخدامها لتحسين محركات البحث؟">
<img width="1200" height="627" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20627'%3E%3C/svg%3E" alt="ما هي مجموعة المواضيع وكيف يمكنك استخدامها لتحسين محركات البحث؟" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/topic-cluster.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/topic-cluster.jpg" alt="ما هي مجموعة المواضيع وكيف يمكنك استخدامها لتحسين محركات البحث؟" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">ما هي مجموعة المواضيع وكيف يمكنك استخدامها لتحسين محركات البحث؟</span>
<span class="kg-encart-meta">المراجع العضوية (SEO) · 16 يناير 2026</span>
</div>
</a><h2 class="wp-block-heading">ExampleSite.fr</h2>
<p>https://www.examplesite.fr › blog <strong>سيظهر عنوان صفحتك هنا...</strong> على الجوال، المساحة محدودة. تأكد من وضع كلماتك المفتاحية الرئيسية في البداية.</p>
<p></p>
<h3 class="wp-block-heading">تحسين الموقع للأجهزة المختلفة</h3>
<p>من المهم تذكر أن طريقة العرض تختلف باختلاف الجهاز. على الهواتف المحمولة، قد تختلف المساحة المتاحة قليلاً، وغالبًا ما يظهر العنوان على عدة أسطر حسب إعدادات نظام التشغيل. مع ذلك، تبقى قاعدة الستين حرفًا ضمانة موثوقة لضمان عرض رسالتك بشكل صحيح على معظم الأجهزة. تحقق دائمًا من العرض المرئي لعناوينك الاستراتيجية.<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%b9%d9%84%d8%a7%d9%85%d8%a9-%d8%a7%d9%84%d9%88%d8%b5%d9%81-%d8%a7%d9%84%d8%aa%d8%b9%d8%b1%d9%8a%d9%81%d9%8a-%d9%84%d8%aa%d8%ad%d8%b3/"></a> نسبة النقر إلى الظهور (CTR): فن تحفيز التفاعل</p>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%83%d9%8a%d9%81-%d9%8a%d9%8f%d8%ad%d8%af%d8%ab-%d8%aa%d8%ad%d8%a7%d9%84%d9%81-%d8%a7%d9%84%d8%b0%d9%83%d8%a7%d8%a1-%d8%a7%d9%84%d8%a7%d8%b5%d8%b7%d9%86%d8%a7%d8%b9%d9%8a-%d9%88%d8%aa%d8%ad%d8%b3/" class="kg-encart-article" aria-label="Lire aussi : كيف يُحدث تحالف الذكاء الاصطناعي وتحسين محركات البحث ثورة في استراتيجيات التسويق الرقمي">
<img width="1200" height="627" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20627'%3E%3C/svg%3E" alt="كيف يُحدث تحالف الذكاء الاصطناعي وتحسين محركات البحث ثورة في استراتيجيات التسويق الرقمي" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/ai-seo-marketing.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/ai-seo-marketing.jpg" alt="كيف يُحدث تحالف الذكاء الاصطناعي وتحسين محركات البحث ثورة في استراتيجيات التسويق الرقمي" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">كيف يُحدث تحالف الذكاء الاصطناعي وتحسين محركات البحث ثورة في استراتيجيات التسويق الرقمي</span>
<span class="kg-encart-meta">المراجع العضوية (SEO) · 20 يناير 2026</span>
</div>
</a><h2 class="wp-block-heading">يُعدّ الظهور في الصفحة الأولى إنجازًا، لكن الحصول على نقرات هو الهدف الأسمى. نسبة النقر إلى الظهور (CTR) مؤشر أداء رئيسي. لن يجذب العنوان المثالي تقنيًا ولكنه ممل الزيارات. هنا يأتي دور كاتب المحتوى في استخدام علم النفس. يمكن استخدام الأرقام (مثل: "7 طرق لـ..."، "أفضل 10 لـ...")، أو الأقواس، أو المعقوفات لجذب الانتباه بصريًا في قائمة روابط نصية موحدة. كما أن أفعال الحركة والوعود بفوائد فورية فعّالة للغاية. يتساءل المستخدمون دائمًا: "ما الفائدة التي سأجنيها؟" يجب أن يجيب عنوانك على هذا السؤال في أقل من ثانية. على سبيل المثال، اختر "تعلم العزف على الجيتار: دليل سريع" بدلاً من "دروس الجيتار". يُعدّ التأثير العاطفي أو خلق شعور بالإلحاح (دون اللجوء إلى عناوين مضللة لجذب النقرات) أدوات فعّالة لتحسين نسبة النقر إلى الظهور.</h2>
<p> <strong>التوافق مع الوصف التعريفي</strong>لا يُجدي العنوان نفعًا بمفرده، بل يُشكّل ثنائيًا لا ينفصل مع الوصف التعريفي، ذلك النص القصير الذي يظهر أسفله مباشرةً في نتائج البحث. إذا كان العنوان هو عامل الجذب، فإن الوصف هو عرض البيع. لزيادة فرصك إلى أقصى حد، من الضروري تحسين الوصف التعريفي بالتزامن مع العنوان. يجب أن يُؤكّد الوصف التعريفي على ما يُقدّمه العنوان ويُشجّع المستخدمين على معرفة المزيد، مع تضمين تنويعات دلالية لكلماتك المفتاحية.</p>
<figure class="wp-block-table"><table>
<thead>
<tr>
<th></th>
<th>تحليل المنافسين والتميّز</th>
<th>قبل وضع اللمسات الأخيرة على استراتيجيتك</th>
<th>عنوان الصفحة</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>راقب ما يفعله منافسوك للكلمة المفتاحية المستهدفة. إذا كانت عناوين النتائج العشر الأولى متشابهة، فإن تقليد هذا النمط سيجعلك غير مرئي بين المنافسين. هنا تكمن الحاجة إلى البحث عن زاوية هجوم مختلفة، أي "نقطة الضعف" في استراتيجية الخصم.</td>
<td></td>
<td>نوع العنوان</td>
</tr>
<tr>
<td>مثال عملي</td>
<td>ميزة تنافسية</td>
<td>مخاطر محتملة</td>
<td>وصف بسيط</td>
</tr>
<tr>
<td>أحذية المشي الرجالية</td>
<td>وضوح فوري</td>
<td>نقص في العمق، انخفاض معدل النقر</td>
<td>وعد/فائدة</td>
</tr>
<tr>
<td>استمتع بالمشي بدون ألم: أحذيتنا المجربة</td>
<td>جاذبية عاطفية قوية</td>
<td>يجب أن يدعمه محتوى (خطر خيبة الأمل)</td>
<td>سؤال/مشكلة</td>
</tr>
</tbody>
</table></figure>
<p>أي أحذية المشي يجب أن تختار في عام ٢٠٢٦؟ <a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d8%b9%d9%84%d8%a7%d9%85%d8%a7%d8%aa-hn-%d8%a8%d8%b4%d9%83%d9%84-%d8%b5%d8%ad%d9%8a%d8%ad-%d9%84%d8%aa%d8%ad%d8%b3%d9%8a%d9%86/"></a> يستهدف الغرض من المعلومات</p>
<div class="kg-encart-contact" role="complementary" aria-label="Prendre contact">
<div class="kg-encart-contact-inner">
<div class="kg-encart-contact-icon" aria-hidden="true">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<div class="kg-encart-contact-body">
<h4 class="kg-encart-contact-title">Vous avez un projet spécifique ?</h4>
<p class="kg-encart-contact-desc">Kevin Grillot accompagne entrepreneurs et PME en <strong>SEO</strong>, <strong>webmarketing</strong> et <strong>stratégie digitale</strong>. Bénéficiez d'un audit ou d'un accompagnement sur-mesure.</p>
</div>
<a href="https://kevin-grillot.fr/me-contacter" class="kg-encart-contact-btn">
Discutons de votre projet
<svg width="14" height="14" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a>
</div>
</div><h2 class="wp-block-heading">أقل فعالية للشراء الفوري (المعاملات)</h2>
<p>قوائم / إحصائيات<strong>أفضل 5 أحذية مشي خفيفة الوزن</strong> سهولة القراءة، تنسيق شائع</p>
<p>يُنظر إليه على أنه محتوى سطحي إذا تم تنفيذه بشكل سيئ</p>
<h3 class="wp-block-heading">الهدف هو التميز بصريًا ودلاليًا. إذا كان الجميع يقدم "دليلًا شاملًا"، فقدم "طريقة سريعة" أو "دراسة حالة". هذا التمييز، بالإضافة إلى الاستخدام الجيد للعلامات الهيكلية مثل علامات Hn داخل المحتوى، يعزز مصداقية صفحتك في موضوع محدد.</h3>
<p></p>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a7%d8%aa-%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d9%85%d8%ad%d8%b1%d9%83%d8%a7%d8%aa-%d8%a7%d9%84%d8%a8%d8%ad%d8%ab-seo-%d9%81%d9%8a-%d8%b9%d8%a7%d9%85-2022-%d8%aa%d8%ad/" class="kg-encart-article" aria-label="Lire aussi : أساسيات تحسين محركات البحث (SEO) في عام 2022: تحليل الاتجاهات الرئيسية">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" alt="أساسيات تحسين محركات البحث (SEO) في عام 2022: تحليل الاتجاهات الرئيسية" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/06/seo-300x157.jpg"><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2025/06/seo-300x157.jpg" alt="أساسيات تحسين محركات البحث (SEO) في عام 2022: تحليل الاتجاهات الرئيسية" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">أساسيات تحسين محركات البحث (SEO) في عام 2022: تحليل الاتجاهات الرئيسية</span>
<span class="kg-encart-meta">المراجع العضوية (SEO) · 03 يونيو 2025</span>
</div>
</a><h2 class="wp-block-heading">تجربة المستخدم (UX) ووعد المحتوى</h2>
<p>تبدأ تجربة المستخدم قبل الوصول إلى الموقع بوقت طويل. تبدأ بمجرد قراءة العنوان في نتائج محركات البحث. العنوان المضلل (عنوان جذاب) الذي يعد باكتشاف مذهل فقط ليؤدي إلى محتوى فارغ هو أسوأ استراتيجية ممكنة في عام 2026. أصبح المستخدمون حذرين ومتطلبين. يعتبر جوجل "التنقل السريع" (التنقل ذهابًا وإيابًا بين صفحة النتائج وموقعك) إشارة ضعيفة للجودة.</p>
<p>يجب أن يعكس عنوان صفحتك محتواها بدقة. إذا كنت تُعلن عن عرض ترويجي، فيجب أن يكون واضحًا للعيان. أما إذا كنت تُعلن عن درس تعليمي، فيجب أن يكون الفيديو أو التعليمات خطوة بخطوة محور الصفحة. هذه المصداقية الفكرية تُعزز ولاء القراء وتُرسل إشارات إيجابية لمحركات البحث، مما يُحسّن ترتيب صفحتك. <a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%85%d8%a7-%d9%87%d9%88-%d8%a7%d9%84%d8%ba%d8%b1%d8%b6-%d9%85%d9%86-%d8%a7%d9%84%d9%88%d8%b3%d9%85-%d8%a7%d9%84%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a-%d9%88%d9%83%d9%8a%d9%81-%d9%8a%d9%85%d9%83%d9%86-%d8%a7/"></a>إدارة العلامة التجارية في العنوان</p>
<figure class="is-provider-youtube is-type-video wp-block-embed wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
يُطرح سؤال متكرر حول تضمين اسم العلامة التجارية في وسم العنوان. كقاعدة عامة، يُنصح بوضع اسم العلامة التجارية في نهاية العنوان، مفصولًا بشرطة (-) أو خط عمودي (|). هذا يُتيح لك الاستفادة من شهرة علامتك التجارية دون التداخل مع المساحة القيّمة المُخصصة للكلمات المفتاحية في بداية السطر. مع ذلك، بالنسبة للصفحات الرئيسية أو صفحات "نبذة عنا"، يُمكن أن تحتل العلامة التجارية المرتبة الأولى.
</div></figure>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d9%85%d8%b9%d8%af%d9%84-%d8%a7%d9%84%d9%86%d9%82%d8%b1-%d9%84%d8%b2%d9%8a%d8%a7%d8%af%d8%a9-%d8%b9%d8%af%d8%af-%d8%b2%d9%88%d8%a7%d8%b1/" class="kg-encart-article" aria-label="Lire aussi : كيفية تحسين معدل النقر لزيادة عدد زوار موقعك الإلكتروني في عام 2026">
<img width="1200" height="627" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20627'%3E%3C/svg%3E" alt="كيفية تحسين معدل النقر لزيادة عدد زوار موقعك الإلكتروني في عام 2026" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/02/click-through-rate.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/02/click-through-rate.jpg" alt="كيفية تحسين معدل النقر لزيادة عدد زوار موقعك الإلكتروني في عام 2026" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">كيفية تحسين معدل النقر لزيادة عدد زوار موقعك الإلكتروني في عام 2026</span>
<span class="kg-encart-meta">المراجع العضوية (SEO) · 14 فبراير 2026</span>
</div>
</a><h2 class="wp-block-heading"></h2>
<p>أخطاء تقنية يجب تجنبها تمامًا <strong>حتى أكثر البحارة خبرةً قد يرتكبون أخطاءً. في تحسين محركات البحث، قد تكون بعض الأخطاء التقنية في وسوم العناوين كارثية. أولها هو الغياب التام لوسم العنوان، أو تركه فارغًا. سيقوم جوجل تلقائيًا بإنشاء عنوان من محتواك، لكن النتيجة نادرًا ما تكون مثالية. ومن الأخطاء الشائعة الأخرى استخدام عناوين افتراضية مثل "صفحة جديدة" أو "بدون عنوان".</strong> </p>
<p>كما يجب التأكد من تهيئة نظام إدارة المحتوى (ووردبريس، شوبيفاي، إلخ) بشكل صحيح. أحيانًا، تُكرر الإعدادات التلقائية اسم الموقع، مما يُنشئ عناوين طويلة مثل "عنوان المقال - اسم الموقع - اسم الموقع". هذا يُضعف الصلة بالموضوع ويُهدر مساحة عرض قيّمة. أخيرًا، تأكد من معالجة مشكلات تكرار المحتوى التقنية باستخدام الوسم الأساسي (canonical tag) بشكل صحيح لمنع اعتبار اختلافات عنوان URL (مع معايير الفرز، على سبيل المثال) صفحات منفصلة تحمل نفس العنوان. <a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%b9%d9%84%d8%a7%d9%85%d8%a9-%d8%a7%d9%84%d9%88%d8%b5%d9%81-%d8%a7%d9%84%d8%aa%d8%b9%d8%b1%d9%8a%d9%81%d9%8a-%d9%84%d8%aa%d8%ad%d8%b3/"></a> https://www.youtube.com/watch?v=P9CfpLsqU0U</p>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Quelle est la longueur idu00e9ale d'une balise title en 2026 ?","acceptedAnswer":{"@type":"Answer","text":"La longueur idu00e9ale se situe entre 50 et 60 caractu00e8res, soit environ 600 pixels de large. Au-delu00e0, Google risque de tronquer votre titre avec des points de suspension, ce qui peut nuire u00e0 la compru00e9hension et au taux de clic."}},{"@type":"Question","name":"Pourquoi Google change-t-il parfois mon titre dans les ru00e9sultats ?","acceptedAnswer":{"@type":"Answer","text":"Google peut ru00e9u00e9crire votre titre s'il juge que l'original ne correspond pas assez u00e0 l'intention de recherche de l'utilisateur, s'il est bourru00e9 de mots-clu00e9s ou s'il est trop long. Pour u00e9viter cela, assurez-vous que votre titre du00e9crit fidu00e8lement et concisu00e9ment le contenu de la page."}},{"@type":"Question","name":"Faut-il mettre le nom de son entreprise dans chaque balise title ?","acceptedAnswer":{"@type":"Answer","text":"Oui, c'est une bonne pratique pour le branding, mais il est pru00e9fu00e9rable de le placer u00e0 la fin du titre (ex: 'Mot-clu00e9 principal - Nom de marque'). Cela laisse la prioritu00e9 aux termes de recherche importants en du00e9but de balise."}},{"@type":"Question","name":"Quelle est la diffu00e9rence entre la balise title et la balise H1 ?","acceptedAnswer":{"@type":"Answer","text":"La balise title apparau00eet dans les ru00e9sultats de recherche et l'onglet du navigateur, c'est le titre pour le SEO 'externe'. La balise H1 est le titre u00e9ditorial visible directement sur la page par le lecteur. Bien qu'ils puissent u00eatre similaires, ils n'ont pas obligatoirement u00e0 u00eatre identiques."}}]}
</script>
<h3>استشراف المستقبل: عناوين الصفحات والذكاء الاصطناعي</h3>
<p>يرتبط مستقبل تحسين محركات البحث (SEO) وعنوان الصفحة ارتباطًا وثيقًا بتطور الذكاء الاصطناعي التوليدي. فبشكل متزايد، تستطيع جوجل ومحركات البحث الأخرى إعادة كتابة عنوان صفحتك ديناميكيًا في نتائج البحث إذا رأت أن اقتراحك الأصلي لا يتطابق بشكل كافٍ مع استعلام المستخدم المحدد. لا ينبغي أن يثنيك هذا عن كتابة عناوين مثالية، بل على العكس تمامًا. فتقديم عنوان واضح وموجز ومُحسَّن يظل أفضل طريقة لتوجيه الذكاء الاصطناعي نحو فهم رسالتك. علاوة على ذلك، يوفر الهيكل الدلالي الجيد والوصف التعريفي المُحسَّن السياق اللازم لبقاء عنوان صفحتك الركيزة الأساسية لاستراتيجيتك. في عام 2026، لم يعد التحسين صراعًا مع الآلة، بل تعاونًا يكون فيه وضوح الرسالة المُرسلة أمرًا بالغ الأهمية.</p>
<h3></h3>
<p>ما هو الطول الأمثل لعنوان الصفحة في عام 2026؟ يتراوح الطول الأمثل بين 50 و60 حرفًا، أو ما يعادل 600 بكسل عرضًا. إضافةً إلى ذلك، قد يختصر جوجل عنوان صفحتك باستخدام علامات الحذف (...)، مما قد يؤثر سلبًا على سهولة القراءة ونسبة النقر.</p>
<h3></h3>
<p>لماذا يُغيّر جوجل أحيانًا عنوان صفحتي في نتائج البحث؟</p>
<h3></h3>
<p>قد يُعيد جوجل كتابة عنوان صفحتك إذا رأى أنه غير ذي صلة كافية بهدف بحث المستخدم، أو إذا كان مليئًا بالكلمات المفتاحية، أو إذا كان طويلًا جدًا. لتجنب ذلك، تأكد من أن عنوانك يصف محتوى الصفحة بدقة وإيجاز.</p>
<!-- ENCART LEAD MAGNET CHECKLIST SEO -->
<div style="margin-top:3rem;padding:2rem;border-radius:16px;background:linear-gradient(135deg,rgba(16,185,129,0.08),rgba(37,99,235,0.06));border:1px solid rgba(16,185,129,0.2);">
<div style="display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;">
<div style="flex-shrink:0;width:48px;height:48px;border-radius:12px;background:rgba(16,185,129,0.15);display:flex;align-items:center;justify-content:center;">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="#10b981" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<div style="flex:1;min-width:200px;">
<h3 style="font-family:'Outfit',sans-serif;font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:0.25rem;">
📋 Checklist SEO gratuite — 50 points à vérifier
</h3>
<p style="color:#9ca3af;line-height:1.6;margin-bottom:1rem;font-size:0.95rem;">
Téléchargez ma checklist SEO complète : technique, contenu, netlinking. Le même outil que j'utilise pour mes clients.
</p>
<a href="https://kevin-grillot.fr/checklist-seo/" style="display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:8px;background:#10b981;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
Télécharger la checklist
</a>
</div>
</div>
</div>
<!-- ENCART SERVICES KEVIN GRILLOT -->
<div style="margin-top:2rem;padding:2rem;border-radius:16px;background:linear-gradient(135deg,rgba(37,99,235,0.08),rgba(16,185,129,0.08));border:1px solid rgba(37,99,235,0.2);">
<h3 style="font-family:'Outfit',sans-serif;font-weight:800;font-size:1.3rem;color:#fff;margin-bottom:0.5rem;">
Besoin de visibilité pour votre activité ?
</h3>
<p style="color:#9ca3af;line-height:1.7;margin-bottom:1.5rem;">
Je suis Kevin Grillot, consultant SEO freelance certifié. J'accompagne les TPE et PME en référencement naturel, Google Ads, Meta Ads et création de site internet.
</p>
<div style="display:flex;flex-wrap:wrap;gap:0.75rem;">
<a href="https://kevin-grillot.fr/seo-geo/" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:#2563eb;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">SEO & GEO</a>
<a href="https://kevin-grillot.fr/google-ads/" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:#f97316;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">Google Ads</a>
<a href="https://kevin-grillot.fr/meta-ads/" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:#e91e8c;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">Meta Ads</a>
<a href="https://kevin-grillot.fr/creation-site/" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:#10b981;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">Création de site</a>
</div>
</div>
<!-- TAGS -->
<div class="mt-12 pt-8 border-t border-white/5 flex flex-wrap gap-2 items-center">
<span class="text-xs text-gray-600 uppercase tracking-widest font-bold mr-2">Tags :</span>
<a href="https://kevin-grillot.fr/ar/tag/%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%b9%d9%84%d8%a7%d9%85%d8%a9-%d8%a7%d9%84%d8%b9%d9%86%d9%88%d8%a7%d9%86-ar/" class="tag-pill">#تحسين علامة العنوان</a>
<a href="https://kevin-grillot.fr/ar/tag/%d8%b9%d9%84%d8%a7%d9%85%d8%a9-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%d8%b3%d9%8a%d9%88-ar/" class="tag-pill">#علامة عنوان سيو</a>
<a href="https://kevin-grillot.fr/ar/tag/%d8%b9%d9%86%d9%88%d8%a7%d9%86-%d8%b5%d9%81%d8%ad%d8%a9-%d8%a7%d9%84%d9%88%d9%8a%d8%a8-ar/" class="tag-pill">#عنوان صفحة الويب</a>
<a href="https://kevin-grillot.fr/ar/tag/%d9%86%d8%b5%d8%a7%d8%a6%d8%ad-%d9%84%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d9%85%d8%ad%d8%b1%d9%83%d8%a7%d8%aa-%d8%a7%d9%84%d8%a8%d8%ad%d8%ab-ar/" class="tag-pill">#نصائح لتحسين محركات البحث</a>
</div>
<!-- Signature Auteur -->
<div class="mt-16 bg-[#0a0a0a] rounded-xl p-8 flex flex-col md:flex-row items-center gap-8 shadow-2xl border border-white/5 relative overflow-hidden group">
<div class="absolute inset-0 bg-blue-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-10 flex-shrink-0">
<div class="w-24 h-24 rounded-full p-1 border-2 border-blue-600 shadow-[0_0_20px_rgba(37,99,235,0.3)]">
<div class="w-full h-full rounded-full overflow-hidden bg-gray-800">
<img width="768" height="1024" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%201024'%3E%3C/svg%3E" alt="Kevin Grillot" class="!rounded-full w-full h-full object-cover object-top transform hover:scale-110 transition-transform duration-500" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2022/01/31-min-768x1024.jpg.avif"><noscript><img width="768" height="1024" src="https://kevin-grillot.fr/wp-content/uploads/2022/01/31-min-768x1024.jpg.avif" alt="Kevin Grillot" class="!rounded-full w-full h-full object-cover object-top transform hover:scale-110 transition-transform duration-500"></noscript>
</div>
</div>
</div>
<div class="relative z-10 text-center md:text-left">
<p class="text-blue-500 text-xs font-black uppercase tracking-[0.15em] mb-2">Écrit par</p>
<h3 class="text-white text-3xl font-bold font-heading leading-tight mb-2">Kevin Grillot</h3>
<p class="text-gray-400 text-sm font-medium leading-relaxed mb-4">Consultant Webmarketing & Expert SEO.</p>
<a href="https://kevin-grillot.fr/blog" class="inline-flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 transition-colors font-bold uppercase tracking-widest" style="border-bottom:none;text-decoration:none">
Voir tous les articles →
</a>
</div>
</div>
<!-- Lead Magnet — Checklist SEO Local -->
<section class="kg-leadmagnet-section" id="kg-leadmagnet" style="--lm-accent:#2563eb;">
<div class="kg-leadmagnet-container">
<div class="kg-leadmagnet-card">
<div class="kg-leadmagnet-glow"></div>
<div class="kg-leadmagnet-content">
<div class="kg-leadmagnet-badge"><i class="fas fa-gift"></i> Ressource gratuite</div>
<h2 class="kg-leadmagnet-title">Checklist SEO Local gratuite — 15 points à vérifier</h2>
<p class="kg-leadmagnet-sub">Téléchargez notre checklist et vérifiez si votre site est optimisé pour Google.</p>
<ul class="kg-leadmagnet-points">
<li><i class="fas fa-check-circle"></i> 15 points essentiels pour le SEO local</li>
<li><i class="fas fa-check-circle"></i> Format actionnable et imprimable</li>
<li><i class="fas fa-check-circle"></i> Utilisé par +200 entrepreneurs</li>
</ul>
<form class="kg-leadmagnet-form" id="kg-leadmagnet-form" data-ajax="https://kevin-grillot.fr/wp-admin/admin-ajax.php" data-nonce="0678deeaad">
<div class="kg-leadmagnet-fields">
<input type="text" name="kg_lm_prenom" placeholder="Votre prénom" required autocomplete="given-name" class="kg-leadmagnet-input">
<input type="email" name="kg_lm_email" placeholder="Votre email" required autocomplete="email" class="kg-leadmagnet-input">
<!-- Honeypot -->
<div style="position:absolute;left:-9999px;" aria-hidden="true">
<input type="text" name="kg_lm_website" tabindex="-1" autocomplete="off">
</div>
<button type="submit" class="kg-leadmagnet-btn">
<i class="fas fa-download"></i> Télécharger gratuitement
</button>
</div>
<p class="kg-leadmagnet-notice"><i class="fas fa-lock"></i> Vos données restent confidentielles. Aucun spam.</p>
</form>
<div class="kg-leadmagnet-success" id="kg-leadmagnet-success" style="display:none;">
<div class="kg-leadmagnet-success-icon"><i class="fas fa-check-circle"></i></div>
<h3>Merci ! Votre checklist est prête.</h3>
<p>Cliquez ci-dessous pour la télécharger :</p>
<a href="" class="kg-leadmagnet-download-link" id="kg-leadmagnet-download" target="_blank" rel="noopener">
<i class="fas fa-file-download"></i> Télécharger la Checklist SEO
</a>
</div>
</div>
</div>
</div>
<style>
.kg-leadmagnet-section { padding: 4rem 1.5rem; position: relative; }
.kg-leadmagnet-container { max-width: 720px; margin: 0 auto; }
.kg-leadmagnet-card {
position: relative; background: rgba(10,10,20,0.85); border: 1px solid rgba(255,255,255,0.08);
border-radius: 1.25rem; padding: 3rem 2.5rem; overflow: hidden;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.kg-leadmagnet-glow {
position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
background: var(--lm-accent); opacity: 0.08; border-radius: 50%; filter: blur(80px);
pointer-events: none;
}
.kg-leadmagnet-content { position: relative; z-index: 1; }
.kg-leadmagnet-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(37,99,235,0.1); color: var(--lm-accent);
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1.25rem;
border: 1px solid rgba(37,99,235,0.2);
}
.kg-leadmagnet-title {
color: #fff; font-size: 1.75rem; font-weight: 800; line-height: 1.2;
margin: 0 0 0.75rem; font-family: 'Outfit', sans-serif;
}
.kg-leadmagnet-sub { color: #9ca3af; font-size: 0.95rem; margin: 0 0 1.5rem; line-height: 1.6; }
.kg-leadmagnet-points { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kg-leadmagnet-points li { color: #d1d5db; font-size: 0.85rem; display: flex; align-items: center; gap: 0.6rem; }
.kg-leadmagnet-points li i { color: var(--lm-accent); font-size: 0.8rem; }
.kg-leadmagnet-fields { display: flex; flex-wrap: wrap; gap: 0.75rem; position: relative; }
.kg-leadmagnet-input {
flex: 1 1 180px; padding: 0.85rem 1rem; border-radius: 0.6rem;
border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
color: #e5e7eb; font-size: 0.9rem; outline: none; transition: border-color 0.2s;
}
.kg-leadmagnet-input:focus { border-color: var(--lm-accent); }
.kg-leadmagnet-input::placeholder { color: #6b7280; }
.kg-leadmagnet-btn {
flex: 1 1 100%; padding: 0.9rem 1.5rem; border: none; border-radius: 0.6rem;
background: var(--lm-accent); color: #fff; font-size: 0.95rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
transition: opacity 0.2s, transform 0.2s;
}
.kg-leadmagnet-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.kg-leadmagnet-btn:disabled { opacity: 0.5; cursor: wait; }
.kg-leadmagnet-notice { font-size: 0.7rem; color: #4b5563; text-align: center; margin-top: 0.75rem; }
.kg-leadmagnet-success { text-align: center; }
.kg-leadmagnet-success-icon { font-size: 2.5rem; color: #22c55e; margin-bottom: 1rem; }
.kg-leadmagnet-success h3 { color: #fff; font-size: 1.3rem; font-weight: 700; margin: 0 0 0.5rem; }
.kg-leadmagnet-success p { color: #9ca3af; font-size: 0.9rem; margin: 0 0 1.5rem; }
.kg-leadmagnet-download-link {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.85rem 2rem; border-radius: 0.6rem;
background: var(--lm-accent); color: #fff; font-weight: 700; font-size: 0.95rem;
text-decoration: none; transition: opacity 0.2s;
}
.kg-leadmagnet-download-link:hover { opacity: 0.9; color: #fff; }
@media(max-width:640px) {
.kg-leadmagnet-card { padding: 2rem 1.5rem; }
.kg-leadmagnet-title { font-size: 1.35rem; }
.kg-leadmagnet-fields { flex-direction: column; }
.kg-leadmagnet-input { flex: 1 1 100%; }
}
</style>
</section>
<script type="rocketlazyloadscript">
(function(){
var form = document.getElementById('kg-leadmagnet-form');
if(!form) return;
form.addEventListener('submit', function(e){
e.preventDefault();
var btn = form.querySelector('.kg-leadmagnet-btn');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi en cours...';
var fd = new FormData(form);
fd.append('action', 'kg_lead_magnet_submit');
fd.append('nonce', form.dataset.nonce);
fetch(form.dataset.ajax, { method: 'POST', body: fd })
.then(function(r){ return r.json(); })
.then(function(data){
if(data.success){
form.style.display = 'none';
var successEl = document.getElementById('kg-leadmagnet-success');
successEl.style.display = 'block';
document.getElementById('kg-leadmagnet-download').href = data.data.download_url;
sessionStorage.setItem('kg_lm_filled', '1');
} else {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert(data.data || 'Une erreur est survenue.');
}
})
.catch(function(){
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert('Erreur r\u00e9seau. Veuillez r\u00e9essayer.');
});
});
})();
</script>
</article>
<!-- SIDEBAR DROITE — Derniers articles -->
<aside class="hidden lg:block lg:col-span-3">
<div class="sticky top-32 flex flex-col gap-4">
<p class="text-[10px] uppercase tracking-widest font-bold text-gray-600 mb-1">Derniers articles</p>
<a href="https://kevin-grillot.fr/ar/creation-de-site-ar/pourquoi-votre-site-internet-ne-genere-aucun-contact-et-comment-y-remedier/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">Pourquoi votre site internet ne génère aucun contact (et comment y remédier)</p>
<p class="text-gray-600 text-xs">04 أبريل 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/meta-ads-ar/facebook-ads-vs-google-ads-lequel-choisir-pour-votre-entreprise-locale/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">Facebook Ads vs Google Ads : lequel choisir pour votre entreprise locale ?</p>
<p class="text-gray-600 text-xs">04 أبريل 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/%d8%a5%d8%b9%d9%84%d8%a7%d9%86%d8%a7%d8%aa-%d8%ac%d9%88%d8%ac%d9%84-sea-ar/google-ads-pour-les-pme-guide-complet-pour-ne-pas-gaspiller-son-budget/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">Google Ads pour les PME : guide complet pour ne pas gaspiller son budget</p>
<p class="text-gray-600 text-xs">04 أبريل 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/seo-local-comment-apparaitre-en-1ere-page-google-pour-votre-metier-a-lyon/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">SEO local : comment apparaître en 1ère page Google pour votre métier à Lyon ?</p>
<p class="text-gray-600 text-xs">04 أبريل 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/creation-de-site-ar/combien-coute-la-creation-dun-site-internet-pour-artisan-en-2026/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">Combien coûte la création d’un site internet pour artisan en 2026 ?</p>
<p class="text-gray-600 text-xs">04 أبريل 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/blog" class="mt-2 text-center text-xs text-blue-500 hover:text-blue-400 font-bold uppercase tracking-widest transition-colors block" style="text-decoration:none;border-bottom:none">
Voir tous les articles →
</a>
</div>
</aside>
</div>
</div>
<!-- ==========================================
ARTICLES LIÉS (même catégorie)
=========================================== -->
<section class="max-w-7xl mx-auto px-6 mt-24 pt-16 border-t border-white/5">
<div class="flex items-center justify-between mb-10">
<div>
<p class="text-blue-500 text-xs font-black uppercase tracking-widest mb-1">Continuer sur le même sujet</p>
<h2 class="text-white text-3xl font-bold font-heading" style="font-family:'Outfit',sans-serif">Articles liés</h2>
</div>
<a href="https://kevin-grillot.fr/ar/category/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/" class="hidden md:flex items-center gap-2 text-xs text-gray-400 hover:text-blue-400 transition-colors font-bold uppercase tracking-widest" style="text-decoration:none;border-bottom:none">
Voir la catégorie
<svg width="12" height="12" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d9%85%d8%ad%d8%b1%d9%83%d8%a7%d8%aa-%d8%a7%d9%84%d8%a8%d8%ad%d8%ab-%d9%85%d9%82%d8%a7%d8%a8%d9%84-%d8%aa%d8%ad%d8%af%d9%8a%d8%af-%d8%a7%d9%84%d9%85%d9%88%d9%82%d8%b9/" class="related-card">
<div style="overflow:hidden">
<picture class="related-card-img wp-post-image" decoding="async">
<source type="image/avif" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2025/12/seo-vs-geo.jpg.avif"/>
<img width="768" height="401" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20401'%3E%3C/svg%3E" alt="découvrez les différences essentielles entre seo et geo, deux stratégies clés pour optimiser votre visibilité en ligne et atteindre efficacement votre audience ciblée." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/12/seo-vs-geo.jpg"/><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2025/12/seo-vs-geo.jpg" alt="découvrez les différences essentielles entre seo et geo, deux stratégies clés pour optimiser votre visibilité en ligne et atteindre efficacement votre audience ciblée." decoding="async"/></noscript>
</picture>
</div>
<div class="p-5 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">المراجع العضوية (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">تحسين محركات البحث مقابل تحديد الموقع الجغرافي: فك رموز الاختلافات الأساسية وتعزيز ظهور علامتك التجارية على ChatGPT</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>28 ديسمبر 2025</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%8a%d8%aa%d9%85-%d8%aa%d8%ab%d8%a8%d9%8a%d8%aa-chatgpt-%d9%85%d8%ad%d9%84%d9%8a%d9%8b%d8%a7-%d8%ab%d9%88%d8%b1%d8%a9-%d9%88%d8%b4%d9%8a%d9%83%d8%a9-%d9%81%d9%8a-%d9%85%d8%ac%d8%a7%d9%84-%d8%aa/" class="related-card">
<div style="overflow:hidden">
<img width="768" height="401" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20401'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="guide complet pour l'installation locale de chatgpt : configurez et utilisez chatgpt directement sur votre machine pour une expérience optimale et sécurisée." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/local-chatgpt-installation.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/local-chatgpt-installation.jpg" class="related-card-img wp-post-image" alt="guide complet pour l'installation locale de chatgpt : configurez et utilisez chatgpt directement sur votre machine pour une expérience optimale et sécurisée." decoding="async" /></noscript> </div>
<div class="p-5 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">المراجع العضوية (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">يتم تثبيت ChatGPT محليًا: ثورة وشيكة في مجال تحسين محركات البحث.</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>04 يناير 2026</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d8%a7%d9%84%d8%aa%d8%b3%d9%88%d9%8a%d9%82-%d8%a7%d9%84%d8%ad%d9%84%d9%82%d9%8a-%d9%88hubspot-%d8%a5%d8%ad%d8%af%d8%a7%d8%ab-%d8%ab%d9%88%d8%b1%d8%a9-%d9%81%d9%8a-%d8%aa%d8%ad%d8%b3%d9%8a%d9%86/" class="related-card">
<div style="overflow:hidden">
<img width="768" height="401" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20401'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez loop marketing, votre partenaire expert en stratégies marketing innovantes pour dynamiser votre visibilité et booster votre croissance." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/loop-marketing.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/loop-marketing.jpg" class="related-card-img wp-post-image" alt="découvrez loop marketing, votre partenaire expert en stratégies marketing innovantes pour dynamiser votre visibilité et booster votre croissance." decoding="async" /></noscript> </div>
<div class="p-5 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">المراجع العضوية (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">التسويق الحلقي وHubSpot: إحداث ثورة في تحسين محركات البحث في ظل صعود الذكاء الاصطناعي التفاعلي</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>21 يناير 2026</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
</div>
</section>
<!-- ==========================================
DERNIERS ARTICLES (4 cartes)
=========================================== -->
<section class="max-w-7xl mx-auto px-6 mt-20 pt-16 border-t border-white/5">
<div class="flex items-center justify-between mb-10">
<div>
<p class="text-gray-500 text-xs font-black uppercase tracking-widest mb-1">Ne manquez rien</p>
<h2 class="text-white text-3xl font-bold font-heading" style="font-family:'Outfit',sans-serif">Derniers articles</h2>
</div>
<a href="https://kevin-grillot.fr/blog" class="hidden md:flex items-center gap-2 text-xs text-gray-400 hover:text-blue-400 transition-colors font-bold uppercase tracking-widest" style="text-decoration:none;border-bottom:none">
Tout voir
<svg width="12" height="12" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
<a href="https://kevin-grillot.fr/ar/creation-de-site-ar/pourquoi-votre-site-internet-ne-genere-aucun-contact-et-comment-y-remedier/" class="related-card">
<div style="overflow:hidden">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" /><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></noscript> </div>
<div class="p-4 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Création de site</span>
<h3 class="text-white font-bold text-base leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Pourquoi votre site internet ne génère aucun contact (et comment y remédier)</h3>
<p class="text-gray-500 text-xs">04 أبريل 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/meta-ads-ar/facebook-ads-vs-google-ads-lequel-choisir-pour-votre-entreprise-locale/" class="related-card">
<div style="overflow:hidden">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" /><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></noscript> </div>
<div class="p-4 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Meta Ads</span>
<h3 class="text-white font-bold text-base leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Facebook Ads vs Google Ads : lequel choisir pour votre entreprise locale ?</h3>
<p class="text-gray-500 text-xs">04 أبريل 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/%d8%a5%d8%b9%d9%84%d8%a7%d9%86%d8%a7%d8%aa-%d8%ac%d9%88%d8%ac%d9%84-sea-ar/google-ads-pour-les-pme-guide-complet-pour-ne-pas-gaspiller-son-budget/" class="related-card">
<div style="overflow:hidden">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" /><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></noscript> </div>
<div class="p-4 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">إعلانات جوجل (SEA)</span>
<h3 class="text-white font-bold text-base leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Google Ads pour les PME : guide complet pour ne pas gaspiller son budget</h3>
<p class="text-gray-500 text-xs">04 أبريل 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/seo-local-comment-apparaitre-en-1ere-page-google-pour-votre-metier-a-lyon/" class="related-card">
<div style="overflow:hidden">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" /><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></noscript> </div>
<div class="p-4 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">المراجع العضوية (SEO)</span>
<h3 class="text-white font-bold text-base leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">SEO local : comment apparaître en 1ère page Google pour votre métier à Lyon ?</h3>
<p class="text-gray-500 text-xs">04 أبريل 2026</p>
</div>
</a>
</div>
<!-- Bouton mobile "Voir tous" -->
<div class="mt-8 text-center md:hidden">
<a href="https://kevin-grillot.fr/blog" class="inline-flex items-center gap-2 px-6 py-3 border border-white/10 rounded-full text-sm text-gray-300 hover:border-blue-500 hover:text-blue-400 transition-all font-medium" style="text-decoration:none;border-bottom:none">
Voir tous les articles
</a>
</div>
</section>
<!-- ==========================================
NAVIGATION PRÉCÉDENT / SUIVANT
=========================================== -->
<div class="max-w-7xl mx-auto px-6 mt-20 border-t border-white/10 pt-16">
<h3 class="text-center text-gray-500 text-xs uppercase tracking-widest mb-10">Continuer la lecture</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%b9%d9%84%d8%a7%d9%85%d8%a9-%d8%a7%d9%84%d9%88%d8%b5%d9%81-%d8%a7%d9%84%d8%aa%d8%b9%d8%b1%d9%8a%d9%81%d9%8a-%d9%84%d8%aa%d8%ad%d8%b3/" class="nav-card p-8 rounded-2xl block group text-left" style="text-decoration:none;border-bottom:none">
<span class="text-xs text-gray-500 font-bold uppercase tracking-widest mb-3 block group-hover:text-blue-500 transition-colors">← Article précédent</span>
<h4 class="text-xl font-bold text-white font-heading leading-snug group-hover:text-blue-400 transition-colors" style="font-family:'Outfit',sans-serif">
كيفية تحسين علامة الوصف التعريفي لتحسين محركات البحث في عام 2026 </h4>
</a>
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%85%d9%86-%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d9%85%d8%ad%d8%b1%d9%83%d8%a7%d8%aa-%d8%a7%d9%84%d8%a8%d8%ad%d8%ab-%d8%a5%d9%84%d9%89-%d8%aa%d8%ad%d8%af%d9%8a%d8%af-%d8%a7%d9%84%d9%85%d9%88%d8%a7%d9%82-2/" class="nav-card p-8 rounded-2xl block group text-right" style="text-decoration:none;border-bottom:none">
<span class="text-xs text-gray-500 font-bold uppercase tracking-widest mb-3 block group-hover:text-blue-500 transition-colors">Article suivant →</span>
<h4 class="text-xl font-bold text-white font-heading leading-snug group-hover:text-blue-400 transition-colors" style="font-family:'Outfit',sans-serif">
من تحسين محركات البحث إلى تحديد المواقع الجغرافية: كيف يعيد الذكاء الاصطناعي تعريف بقاء العلامات التجارية وفقًا لجوليان فيراند (ليفينج باكتس) </h4>
</a>
</div>
</div>
</main>
<!-- ==========================================
BARRE FLOTTANTE "LIRE ENSUITE"
Apparaît à 70% de lecture
=========================================== -->
<div id="read-next-bar" aria-label="Lire l'article suivant" role="complementary">
<div class="max-w-4xl mx-auto px-4 py-3 flex items-center gap-4">
<!-- Miniature -->
<img width="1200" height="627" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20627'%3E%3C/svg%3E" alt="" class="read-next-thumb" style="width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/12/brand-survival.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2025/12/brand-survival.jpg" alt="" class="read-next-thumb" style="width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0"></noscript>
<!-- Texte -->
<div class="flex-1 min-w-0">
<p class="text-gray-500 text-xs font-bold uppercase tracking-widest mb-0.5">Article suivant</p>
<p class="text-white text-sm font-semibold truncate">من تحسين محركات البحث إلى تحديد المواقع الجغرافية: كيف يعيد الذكاء الاصطناعي تعريف بقاء العلامات التجارية وفقًا لجوليان فيراند (ليفينج باكتس)</p>
</div>
<!-- CTA -->
<a href="https://kevin-grillot.fr/ar/%d8%a7%d9%84%d9%85%d8%b1%d8%a7%d8%ac%d8%b9-%d8%a7%d9%84%d8%b9%d8%b6%d9%88%d9%8a%d8%a9-seo-ar/%d9%85%d9%86-%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d9%85%d8%ad%d8%b1%d9%83%d8%a7%d8%aa-%d8%a7%d9%84%d8%a8%d8%ad%d8%ab-%d8%a5%d9%84%d9%89-%d8%aa%d8%ad%d8%af%d9%8a%d8%af-%d8%a7%d9%84%d9%85%d9%88%d8%a7%d9%82-2/" class="flex-shrink-0 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-full transition-colors" style="text-decoration:none;border-bottom:none;white-space:nowrap">
Lire →
</a>
<!-- Fermer -->
<button id="close-next-bar" aria-label="Fermer" class="flex-shrink-0 w-8 h-8 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
</div>
<!-- SCRIPTS -->
<script type="rocketlazyloadscript">
(function() {
// ---- 1. BARRE DE PROGRESSION ----
var progressBar = document.getElementById('reading-progress');
window.addEventListener('scroll', function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
if (progressBar && scrollHeight > 0) {
progressBar.style.width = (scrollTop / scrollHeight * 100) + '%';
}
}, { passive: true });
// ---- 2. TABLE DES MATIÈRES ----
var tocSidebar = document.getElementById('toc-sidebar');
var sidebarLeft = document.getElementById('sidebar-left');
var fixedLeft = null;
var fixedWidth = null;
var STICKY_TOP = 110; // px — sous la nav
// Enregistre les coordonnées de la sidebar pour le mode fixed
function recordSidebarPos() {
if (!sidebarLeft) return;
var rect = sidebarLeft.getBoundingClientRect();
fixedLeft = Math.round(rect.left + window.scrollX);
fixedWidth = Math.round(rect.width);
}
// Bascule sticky → fixed quand le grid se termine (pour rester "toujours visible")
function updateSidebarMode() {
if (!tocSidebar || !sidebarLeft || window.innerWidth < 1024) {
if (tocSidebar) tocSidebar.style.cssText = '';
return;
}
if (fixedLeft === null) recordSidebarPos();
var asideRect = sidebarLeft.getBoundingClientRect();
if (asideRect.top > STICKY_TOP) {
// Au-dessus du contenu : laisser le sticky CSS gérer
tocSidebar.style.cssText = '';
} else if (asideRect.bottom < STICKY_TOP + tocSidebar.offsetHeight + 20) {
// Fin du grid : passer en fixed pour rester visible
tocSidebar.style.position = 'fixed';
tocSidebar.style.top = STICKY_TOP + 'px';
tocSidebar.style.left = fixedLeft + 'px';
tocSidebar.style.width = fixedWidth + 'px';
tocSidebar.style.maxHeight = 'calc(100vh - 130px)';
tocSidebar.style.overflowY = 'auto';
} else {
// Dans la zone de lecture : sticky normal
tocSidebar.style.cssText = '';
}
}
window.addEventListener('resize', function() { recordSidebarPos(); updateSidebarMode(); }, { passive: true });
window.addEventListener('scroll', updateSidebarMode, { passive: true });
function buildTOC() {
var headings = document.querySelectorAll('.article-body h2, .article-body h3');
if (!headings.length) {
var emptyMsg = document.getElementById('toc-empty-msg');
if (emptyMsg) emptyMsg.style.display = '';
return;
}
var tocList = document.getElementById('toc-list');
var tocMobileList = document.getElementById('toc-mobile-list');
if (!tocList && !tocMobileList) return;
var items = [];
headings.forEach(function(h, idx) {
if (!h.id) {
h.id = 'h-' + idx + '-' + h.textContent.trim().toLowerCase()
.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').substring(0, 40);
}
items.push({ id: h.id, text: h.textContent.trim(), level: h.tagName });
});
function buildList(listEl, isMobile) {
if (!listEl) return;
items.forEach(function(item) {
var li = document.createElement('li');
if (item.level === 'H3' && isMobile) li.className = 'toc-h3-item';
var a = document.createElement('a');
a.href = '#' + item.id;
a.textContent = item.text;
if (item.level === 'H3' && !isMobile) a.classList.add('toc-h3');
a.addEventListener('click', function(e) {
e.preventDefault();
var target = document.getElementById(item.id);
if (target) {
window.scrollTo({ top: target.getBoundingClientRect().top + window.pageYOffset - 100, behavior: 'smooth' });
}
});
li.appendChild(a);
listEl.appendChild(li);
});
}
buildList(tocList, false);
buildList(tocMobileList, true);
// Surlignage dynamique du titre courant
var tocLinks = tocList ? tocList.querySelectorAll('a') : [];
window.addEventListener('scroll', function() {
var scrollPos = window.pageYOffset + 130;
var current = '';
items.forEach(function(item) {
var el = document.getElementById(item.id);
if (el && el.offsetTop <= scrollPos) current = item.id;
});
tocLinks.forEach(function(link) {
link.classList.toggle('toc-active', link.getAttribute('href') === '#' + current);
});
}, { passive: true });
}
// ---- 3. TOC MOBILE TOGGLE ----
var tocToggle = document.getElementById('toc-toggle');
var tocContent = document.getElementById('toc-mobile-content');
var tocChevron = document.getElementById('toc-chevron');
if (tocToggle && tocContent) {
tocToggle.addEventListener('click', function() {
var isOpen = tocContent.classList.toggle('open');
tocChevron.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0)';
});
}
// ---- 4. BARRE FLOTTANTE "LIRE ENSUITE" ----
var bar = document.getElementById('read-next-bar');
var closeBtn = document.getElementById('close-next-bar');
var barShown = false;
var barDismissed = false;
if (bar) {
window.addEventListener('scroll', function() {
if (barDismissed) return;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var pct = scrollHeight > 0 ? (scrollTop / scrollHeight * 100) : 0;
if (pct > 70 && !barShown) {
bar.classList.add('bar-visible');
barShown = true;
} else if (pct <= 60 && barShown) {
bar.classList.remove('bar-visible');
barShown = false;
}
}, { passive: true });
if (closeBtn) {
closeBtn.addEventListener('click', function() {
bar.classList.remove('bar-visible');
bar.classList.add('bar-dismissed');
barDismissed = true;
});
}
}
// ---- INIT ----
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
recordSidebarPos();
buildTOC();
});
} else {
recordSidebarPos();
buildTOC();
}
// Recalcul après images chargées (layout peut changer)
window.addEventListener('load', function() {
recordSidebarPos();
updateSidebarMode();
});
})();
</script>
<!-- DÉBUT DU FOOTER PERSONNALISÉ -->
<style>
/* Styles spécifiques au footer (isolés pour ne pas casser le reste) */
.custom-footer {
font-family: 'Inter', sans-serif;
background-color: #000000;
color: white;
position: relative;
overflow: hidden;
width: 100%;
margin-top: auto; /* Pousse le footer en bas si la page est courte */
}
.font-heading { font-family: 'Outfit', sans-serif; }
/* Couleurs */
.text-brand-blue { color: #0055ff; }
.bg-brand-blue { background-color: #0055ff; }
/* Liens Footer */
.footer-link {
position: relative;
color: #9ca3af; /* gray-400 */
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.footer-link:hover {
color: #ffffff;
transform: translateX(5px);
}
.footer-link::before {
content: '';
width: 0;
height: 1px;
background-color: #0055ff;
transition: width 0.3s ease;
}
.footer-link:hover::before {
width: 10px;
}
/* Cartes - voir hover amélioré ci-dessous */
/* Icones */
.icon-circle {
width: 3rem; height: 3rem;
border-radius: 50%;
background-color: rgba(0, 85, 255, 0.1);
display: flex; align-items: center; justify-content: center;
color: #0055ff; font-size: 1.25rem;
transition: all 0.3s ease;
margin-bottom: 1rem;
}
.footer-card:hover .icon-circle {
background-color: #0055ff; color: white;
box-shadow: 0 0 20px rgba(0, 85, 255, 0.4);
}
/* Compétences */
.footer-skill {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 700;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
color: var(--sk-color, #9ca3af); text-decoration: none;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-skill:hover {
background: color-mix(in srgb, var(--sk-color) 12%, transparent);
border-color: color-mix(in srgb, var(--sk-color) 40%, transparent);
color: var(--sk-color);
transform: translateX(6px);
box-shadow: 0 0 20px color-mix(in srgb, var(--sk-color) 15%, transparent);
}
.footer-skill i { width: 1.2em; text-align: center; }
/* Hover animation cartes footer */
.footer-card {
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.03);
background: linear-gradient(145deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-card:hover {
border-color: rgba(0, 85, 255, 0.25);
background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(0,85,255,0.03) 100%);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 85, 255, 0.08), 0 0 0 1px rgba(0, 85, 255, 0.1);
}
/* Bouton */
.btn-glow {
background: linear-gradient(90deg, #0055ff, #0044cc);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.05em;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 85, 255, 0.2);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-glow:hover {
box-shadow: 0 0 25px rgba(0, 85, 255, 0.5);
transform: translateY(-2px);
color: white;
}
</style>
<footer class="custom-footer pt-24 pb-8 border-t border-white/5">
<!-- Lumières d'ambiance (Background) -->
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-600/5 rounded-full blur-[120px] -z-10 pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-blue-900/5 rounded-full blur-[100px] -z-10 pointer-events-none"></div>
<div class="max-w-[1400px] mx-auto px-6">
<!-- En-tête du Footer (CTA) -->
<div class="mb-16 md:flex justify-between items-end border-b border-white/5 pb-10">
<div>
<h2 class="font-heading text-3xl md:text-5xl font-black uppercase tracking-tight mb-2 text-white">
Prêt à <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-white">décoller ?</span>
</h2>
<p class="text-gray-400 max-w-md">Transformons votre présence digitale en véritable levier de croissance.</p>
</div>
<div class="mt-6 md:mt-0">
<a href="https://kevin-grillot.fr/me-contacter/" class="btn-glow">
Démarrer un projet <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Grid Principale (5 Colonnes) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 lg:gap-8 mb-20">
<!-- 1. CONTACT -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-envelope"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Contact</h3>
<div class="space-y-4">
<a href="mailto:grillotkevin@gmail.com" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-blue-500 group-hover:bg-brand-blue group-hover:text-white transition-all"><i class="fas fa-at text-xs"></i></span>
<span class="text-sm font-medium">grillotkevin@gmail.com</span>
</a>
<a href="tel:0667570018" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-blue-500 group-hover:bg-brand-blue group-hover:text-white transition-all"><i class="fas fa-phone text-xs"></i></span>
<span class="text-sm font-medium">06 67 57 00 18</span>
</a>
<a href="https://wa.me/33667570018?text=Bonjour%20Kevin%2C%20je%20souhaite%20un%20devis%20pour%20mon%20projet." target="_blank" rel="noopener" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-green-500 group-hover:bg-green-600 group-hover:text-white transition-all"><i class="fab fa-whatsapp text-xs"></i></span>
<span class="text-sm font-medium">WhatsApp direct</span>
</a>
</div>
</div>
<!-- 2. NAVIGATION -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-compass"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Navigation</h3>
<nav class="flex flex-col space-y-2 text-sm font-medium">
<a href="https://kevin-grillot.fr/mes-experiences/" class="footer-link">Mes Expériences</a>
<a href="https://kevin-grillot.fr/mes-formations/" class="footer-link">Mes Formations</a>
<a href="https://kevin-grillot.fr/mes-etudes/" class="footer-link">Mes Études</a>
<a href="https://kevin-grillot.fr/a-propos/" class="footer-link">À Propos</a>
<a href="https://kevin-grillot.fr/blog/" class="footer-link">Le Blog</a>
<a href="https://kevin-grillot.fr/creation-site-internet/" class="footer-link">Création Site Web</a>
</nav>
</div>
<!-- 3. RÉSEAUX -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-share-alt"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Réseaux</h3>
<p class="text-gray-400 text-sm mb-6">Suivez mon actualité et mes conseils quotidiens.</p>
<div class="flex gap-4">
<a href="https://www.linkedin.com/in/kevin-grillot-036652159/" target="_blank" class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-white hover:bg-[#0077b5] hover:scale-110 transition-all duration-300 shadow-lg">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<a href="https://www.instagram.com/kevingr04/" target="_blank" class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-white hover:bg-gradient-to-tr hover:from-yellow-400 hover:via-red-500 hover:to-purple-500 hover:scale-110 transition-all duration-300 shadow-lg">
<i class="fab fa-instagram text-xl"></i>
</a>
</div>
</div>
<!-- 3b. COMPÉTENCES -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-rocket"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Compétences</h3>
<div class="space-y-3">
<a href="https://kevin-grillot.fr/seo-geo/" class="footer-skill" style="--sk-color:#2563eb;">
<i class="fas fa-search"></i> SEO & GEO
</a>
<a href="https://kevin-grillot.fr/google-ads/" class="footer-skill" style="--sk-color:#f97316;">
<i class="fab fa-google"></i> Google Ads
</a>
<a href="https://kevin-grillot.fr/meta-ads/" class="footer-skill" style="--sk-color:#e91e8c;">
<i class="fab fa-meta"></i> Meta Ads
</a>
<a href="https://kevin-grillot.fr/creation-site/" class="footer-skill" style="--sk-color:#10b981;">
<i class="fas fa-code"></i> Création de site
</a>
</div>
</div>
<!-- 4. EXPERTISE (Liste Enrichie) -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-certificate"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Expertise</h3>
<div class="space-y-3 mb-6">
<!-- SEMrush -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-orange-500/30 transition-colors">
<i class="fas fa-fire text-orange-500 text-lg"></i>
<span class="font-bold text-sm text-gray-200">SEMrush</span>
</div>
<!-- Google Looker Studio -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-400/30 transition-colors">
<i class="fas fa-chart-area text-blue-400 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Looker Studio</span>
</div>
<!-- Meta Ads -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-600/30 transition-colors">
<i class="fab fa-meta text-blue-600 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Meta Ads</span>
</div>
<!-- Google Ads -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-500/30 transition-colors">
<i class="fab fa-google text-blue-500 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Google Ads</span>
</div>
</div>
<a href="https://kevin-grillot.fr/mes-cerfications" class="text-xs font-bold text-blue-500 hover:text-white uppercase tracking-widest transition-colors flex items-center gap-2 group justify-center">
Toutes les certifs <i class="fas fa-long-arrow-alt-right transform group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<!-- Copyright & Mentions -->
<div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-gray-600 font-medium">
<p>
© <span id="current-year"></span> <span class="text-white font-bold">KEVIN GRILLOT</span>. Tous droits réservés.
</p>
<div class="mt-4 md:mt-0 flex flex-wrap justify-center gap-6">
<span class="hidden md:inline text-white/10">|</span>
<a href="https://kevin-grillot.fr/mentions-legales" class="hover:text-blue-500 transition-colors">Mentions Légales</a>
<a href="https://kevin-grillot.fr/cv-foot/" class="hover:text-blue-500 transition-colors">CV Foot</a>
<span class="text-gray-700">Dev with 💙 by Me</span>
</div>
</div>
</div>
</footer>
<script type="rocketlazyloadscript">
// Mise à jour auto de l'année
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
<!-- FIN DU FOOTER PERSONNALISÉ -->
<!-- BOUTON WHATSAPP FLOTTANT -->
<style>
.whatsapp-float {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
background: #25D366;
color: white;
padding: 12px 20px 12px 16px;
border-radius: 50px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.whatsapp-float:hover {
background: #1ebe5d;
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.55);
color: white;
}
.whatsapp-float i { font-size: 22px; }
@media (max-width: 640px) {
.whatsapp-float span { display: none; }
.whatsapp-float { padding: 14px; border-radius: 50%; }
}
</style>
<a href="https://wa.me/33667570018?text=Bonjour%20Kevin%2C%20je%20souhaite%20un%20devis%20pour%20mon%20projet."
class="whatsapp-float" target="_blank" rel="noopener"
title="Contacter Kevin Grillot sur WhatsApp">
<i class="fab fa-whatsapp"></i>
<span>Devis rapide</span>
</a>
<!-- FIN BOUTON WHATSAPP FLOTTANT -->
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/kevin-grillot\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="rocket-browser-checker-js-after">
"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();
</script>
<script id="rocket-preload-links-js-extra">
var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/logkevgriin\/|\/wp-admin\/|\/logout\/|\/logkevgriin\/|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/kevin-grillot.fr","onHoverDelay":"100","rateThrottle":"3"};
</script>
<script id="rocket-preload-links-js-after">
(function() {
"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();
}());
</script>
<script type="rocketlazyloadscript">
(function() {
var expirationDate = new Date();
expirationDate.setTime( expirationDate.getTime() + 31536000 * 1000 );
document.cookie = "pll_language=ar; expires=" + expirationDate.toUTCString() + "; path=/; secure; SameSite=Lax";
}());
</script>
<!-- Exit-Intent Popup -->
<div id="kg-exit-popup" class="kg-exit-overlay" style="display:none;">
<div class="kg-exit-backdrop"></div>
<div class="kg-exit-card">
<button class="kg-exit-close" id="kg-exit-close" aria-label="Fermer">×</button>
<div class="kg-exit-glow"></div>
<div class="kg-exit-content" id="kg-exit-content">
<div class="kg-exit-badge"><i class="fas fa-gift"></i> Avant de partir</div>
<h2 class="kg-exit-title">Attendez ! Votre audit SEO gratuit</h2>
<p class="kg-exit-sub">Avant de partir, téléchargez notre checklist SEO locale — 15 points essentiels pour votre visibilité.</p>
<form class="kg-exit-form" id="kg-exit-form" data-ajax="https://kevin-grillot.fr/wp-admin/admin-ajax.php" data-nonce="0678deeaad">
<input type="text" name="kg_lm_prenom" placeholder="Votre prénom" required autocomplete="given-name" class="kg-exit-input">
<input type="email" name="kg_lm_email" placeholder="Votre email" required autocomplete="email" class="kg-exit-input">
<div style="position:absolute;left:-9999px;" aria-hidden="true">
<input type="text" name="kg_lm_website" tabindex="-1" autocomplete="off">
</div>
<button type="submit" class="kg-exit-btn">
<i class="fas fa-download"></i> Télécharger gratuitement
</button>
<p class="kg-exit-notice"><i class="fas fa-lock"></i> Aucun spam. Données confidentielles.</p>
</form>
<div class="kg-exit-success" id="kg-exit-success" style="display:none;">
<div style="font-size:2.5rem;color:#22c55e;margin-bottom:1rem;"><i class="fas fa-check-circle"></i></div>
<h3 style="color:#fff;font-size:1.2rem;font-weight:700;margin:0 0 0.5rem;">Merci ! Votre checklist est prête.</h3>
<a href="" class="kg-exit-download" id="kg-exit-download" target="_blank" rel="noopener">
<i class="fas fa-file-download"></i> Télécharger la Checklist
</a>
</div>
</div>
</div>
</div>
<style>
.kg-exit-overlay {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.3s ease;
}
.kg-exit-overlay.visible { opacity: 1; }
.kg-exit-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.kg-exit-card {
position: relative; z-index: 1; max-width: 520px; width: 90%;
background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.08);
border-radius: 1.25rem; padding: 2.5rem 2rem; overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
transform: translateY(20px) scale(0.95); transition: transform 0.3s ease;
}
.kg-exit-overlay.visible .kg-exit-card { transform: translateY(0) scale(1); }
.kg-exit-close {
position: absolute; top: 1rem; right: 1rem; z-index: 2;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
color: #9ca3af; font-size: 1.5rem; width: 36px; height: 36px;
border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background 0.2s, color 0.2s; line-height: 1;
}
.kg-exit-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.kg-exit-glow {
position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
width: 200px; height: 200px; background: #2563eb; opacity: 0.1;
border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.kg-exit-content { position: relative; z-index: 1; text-align: center; }
.kg-exit-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(37,99,235,0.1); color: #2563eb;
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1rem;
border: 1px solid rgba(37,99,235,0.2);
}
.kg-exit-title { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 0.75rem; font-family: 'Outfit', sans-serif; }
.kg-exit-sub { color: #9ca3af; font-size: 0.9rem; margin: 0 0 1.5rem; line-height: 1.5; }
.kg-exit-form { display: flex; flex-direction: column; gap: 0.75rem; position: relative; }
.kg-exit-input {
padding: 0.85rem 1rem; border-radius: 0.6rem;
border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
color: #e5e7eb; font-size: 0.9rem; outline: none; transition: border-color 0.2s;
width: 100%; box-sizing: border-box;
}
.kg-exit-input:focus { border-color: #2563eb; }
.kg-exit-input::placeholder { color: #6b7280; }
.kg-exit-btn {
padding: 0.9rem 1.5rem; border: none; border-radius: 0.6rem;
background: #2563eb; color: #fff; font-size: 0.95rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
transition: opacity 0.2s, transform 0.2s; width: 100%;
}
.kg-exit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.kg-exit-btn:disabled { opacity: 0.5; cursor: wait; }
.kg-exit-notice { font-size: 0.7rem; color: #4b5563; text-align: center; margin: 0; }
.kg-exit-download {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.85rem 2rem; border-radius: 0.6rem; margin-top: 1rem;
background: #2563eb; color: #fff; font-weight: 700; font-size: 0.95rem;
text-decoration: none; transition: opacity 0.2s;
}
.kg-exit-download:hover { opacity: 0.9; color: #fff; }
@media(max-width:480px) {
.kg-exit-card { padding: 2rem 1.25rem; }
.kg-exit-title { font-size: 1.25rem; }
}
</style>
<script type="rocketlazyloadscript">
(function(){
var popup = document.getElementById('kg-exit-popup');
if(!popup) return;
var shown = false;
function showPopup(){
if(shown) return;
if(sessionStorage.getItem('kg_exit_shown')) return;
if(sessionStorage.getItem('kg_lm_filled')) return;
if(window.location.pathname.indexOf('me-contacter') !== -1) return;
shown = true;
sessionStorage.setItem('kg_exit_shown', '1');
popup.style.display = 'flex';
requestAnimationFrame(function(){
requestAnimationFrame(function(){
popup.classList.add('visible');
});
});
}
function hidePopup(){
popup.classList.remove('visible');
setTimeout(function(){ popup.style.display = 'none'; }, 300);
}
// Desktop only: mouseleave
if(window.innerWidth > 768){
document.addEventListener('mouseleave', function(e){
if(e.clientY < 5) showPopup();
});
}
document.getElementById('kg-exit-close').addEventListener('click', hidePopup);
popup.querySelector('.kg-exit-backdrop').addEventListener('click', hidePopup);
document.addEventListener('keydown', function(e){
if(e.key === 'Escape' && popup.classList.contains('visible')) hidePopup();
});
// Form submit
var form = document.getElementById('kg-exit-form');
form.addEventListener('submit', function(e){
e.preventDefault();
var btn = form.querySelector('.kg-exit-btn');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi...';
var fd = new FormData(form);
fd.append('action', 'kg_lead_magnet_submit');
fd.append('nonce', form.dataset.nonce);
fetch(form.dataset.ajax, { method: 'POST', body: fd })
.then(function(r){ return r.json(); })
.then(function(data){
if(data.success){
form.style.display = 'none';
var s = document.getElementById('kg-exit-success');
s.style.display = 'block';
document.getElementById('kg-exit-download').href = data.data.download_url;
sessionStorage.setItem('kg_lm_filled', '1');
} else {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert(data.data || 'Erreur.');
}
})
.catch(function(){
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert('Erreur reseau.');
});
});
})();
</script>
<script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://kevin-grillot.fr/wp-content/plugins/wp-rocket/assets/js/lazyload/17.5/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>
</body>
</html>
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1777455690 -->